如何使用JS来改变CSS样式

电玩女神 2022-09-24 12:18 224阅读 0赞

### 方法: ###

### document.getElementById("xx").style.xxx中的所有属性是什么 ###

<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; border:1px solid silver; word-break:break-word; color:rgb(0,0,0); font-family:verdana,'ms song',宋体,Arial,微软雅黑,Helvetica,sans-serif; font-size:12px; line-height:21.6px"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <th colspan="2" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 盒子标签和属性对照</th> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> CSS语法（不区分大小写）</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> JavaScript语法（区分大小写）</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-bottom</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderBottom</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-bottom-color</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderBottomColor</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-bottom-style</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderBottomStyle</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-bottom-width</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderBottomWidth</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-color</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderColor</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-left</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderLeft</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-left-color</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderLeftColor</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-left-style</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderLeftStyle</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-left-width</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderLeftWidth</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-right</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderRight</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-right-color</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderRightColor</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-right-style</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderRightStyle</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-right-width</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderRightWidth</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-style</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderStyle</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-top</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderTop</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-top-color</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderTopColor</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-top-style</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderTopStyle</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-top-width</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderTopWidth</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> border-width</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> borderWidth</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> clear</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> clear</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> float</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> floatStyle</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> margin</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> margin</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> margin-bottom</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> marginBottom</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> margin-left</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> marginLeft</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> margin-right</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> marginRight</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> margin-top</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> marginTop</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> padding</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> padding</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> padding-bottom</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> paddingBottom</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> padding-left</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> paddingLeft</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> padding-right</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> paddingRight</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> padding-top</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> paddingTop</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <th colspan="2" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 颜色和背景标签和属性对照</th> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> CSS 语法（不区分大小写）</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> JavaScript 语法（区分大小写）</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> background</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> background</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> background-attachment</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> backgroundAttachment</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> background-color</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> backgroundColor</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> background-image</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> backgroundImage</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> background-position</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> backgroundPosition</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> background-repeat</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> backgroundRepeat</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> color</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> color</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td colspan="2" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <th colspan="2" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 样式标签和属性对照</th> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> CSS语法（不区分大小写）</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> JavaScript 语法（区分大小写）</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> display</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> display</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> list-style-type</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> listStyleType</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> list-style-image</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> listStyleImage</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> list-style-position</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> listStylePosition</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> list-style</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> listStyle</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> white-space</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> whiteSpace</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td colspan="2" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <th colspan="2" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 文字样式标签和属性对照</th> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> CSS 语法（不区分大小写）</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> JavaScript 语法（区分大小写）</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> font</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> font</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> font-family</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> fontFamily</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> font-size</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> fontSize</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> font-style</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> fontStyle</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> font-variant</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> fontVariant</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> font-weight</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> fontWeight</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td colspan="2" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> &nbsp;</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <th colspan="2" style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 文本标签和属性对照</th> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> CSS 语法（不区分大小写）</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> JavaScript 语法（区分大小写）</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> letter-spacing</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> letterSpacing</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> line-break</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> lineBreak</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> line-height</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> lineHeight</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> text-align</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> textAlign</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> text-decoration</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> textDecoration</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> text-indent</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> textIndent</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> text-justify</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> textJustify</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> text-transform</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> textTransform</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> vertical-align</td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> verticalAlign&nbsp; </td> 
 </tr> 
 </tbody> 
</table>