改变css属性值的方法：1、使用“document.getElementById(id值).className=字符串;”语句修改；2、使用“document.getElementById(id值).style.属性名=值;”语句修改。
本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。
1.用JS修改标签的 class 属性值：
class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也就更换了，所以这属于第一种修改方法。
更改一个标签的 class 属性的代码是：
立即学习“前端免费学习笔记（深入）”；
document.getElementById(id值).className = 字符串;
登录后复制
document.getElementById( id ) 用于获取标签对应的 DOM 对象，你也可以用其它方法获取。className 是 DOM 对象的一个属性，它对应于标签的 class 属性。字符串 是 class 属性的新值，它应该是一个已定义的CSS选择符。
利用这种办法可以把标签的CSS样式表替换成另外一个，也可以让一个没有应用CSS样式的标签应用指定的样式。
举例：
.txt {font-size: 30px; font-weight: bold; color: red;}欢迎光临！function setClass(){document.getElementById( "tt" ).className = "txt";}
登录后复制
2.用JS修改标签的 style 属性值：
style 属性也是在标签上引用样式表的方法之一，它的值是一个CSS样式表。DOM 对象也有 style 属性，不过这个属性本身也是一个对象，Style 对象的属性和 CSS 属性是一一对应的，当改变了 Style 对象的属性时，对应标签的 CSS 属性值也就改变了，所以这属于第二种修改方法。
更改一个标签的 CSS 属性的代码是：
document.getElementById( id ).style.属性名 = 值;
登录后复制
document.getElementById( id ) 用于获取标签对应的 DOM 对象，你也可以用其它方法获取。style 是 DOM 对象的一个属性，它本身也是一个对象。属性名 是 Style 对象的属性名，它和某个CSS属性是相对应的。
说明：这种方法修改的单一的一个CSS属性，它不影响标签上其它CSS属性值。
举例：
欢迎光临！function setSize(){document.getElementById( "t2" ).style.fontSize = "30px";}function setColor(){document.getElementById( "t2" ).style.color = "red";}function setbgColor(){document.getElementById( "t2" ).style.backgroundColor = "blue";}function setBd(){document.getElementById( "t2" ).style.border = "3px solid #FA8072";}
登录后复制
方法：
document.getElementById(“xx”).style.xxx中的所有属性是什么
盒子标签和属性对照CSS语法（不区分大小写）JavaScript语法（区分大小写）borderborderborder-bottomborderBottomborder-bottom-colorborderBottomColorborder-bottom-styleborderBottomStyleborder-bottom-widthborderBottomWidthborder-colorborderColorborder-leftborderLeftborder-left-colorborderLeftColorborder-left-styleborderLeftStyleborder-left-widthborderLeftWidthborder-rightborderRightborder-right-colorborderRightColorborder-right-styleborderRightStyleborder-right-widthborderRightWidthborder-styleborderStyleborder-topborderTopborder-top-colorborderTopColorborder-top-styleborderTopStyleborder-top-widthborderTopWidthborder-widthborderWidthclearclearfloatfloatStylemarginmarginmargin-bottommarginBottommargin-leftmarginLeftmargin-rightmarginRightmargin-topmarginToppaddingpaddingpadding-bottompaddingBottompadding-leftpaddingLeftpadding-rightpaddingRightpadding-toppaddingTop
颜色和背景标签和属性对照CSS 语法（不区分大小写）JavaScript 语法（区分大小写）backgroundbackgroundbackground-attachmentbackgroundAttachmentbackground-colorbackgroundColorbackground-imagebackgroundImagebackground-positionbackgroundPositionbackground-repeatbackgroundRepeatcolorcolor
样式标签和属性对照CSS语法（不区分大小写）JavaScript 语法（区分大小写）displaydisplaylist-style-typelistStyleTypelist-style-imagelistStyleImagelist-style-positionlistStylePositionlist-stylelistStylewhite-spacewhiteSpace
文字样式标签和属性对照CSS 语法（不区分大小写）JavaScript 语法（区分大小写）fontfontfont-familyfontFamilyfont-sizefontSizefont-stylefontStylefont-variantfontVariantfont-weightfontWeight
文本标签和属性对照CSS 语法（不区分大小写）JavaScript 语法（区分大小写）letter-spacingletterSpacingline-breaklineBreakline-heightlineHeighttext-aligntextAligntext-decorationtextDecorationtext-indenttextIndenttext-justifytextJustifytext-transformtextTransformvertical-align
verticalAlign
【推荐学习：javascript高级教程】
以上就是js怎么改变css属性值的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2713005.html
