这篇文章主要介绍“JS怎么设置样式”，在日常操作中，相信很多人在JS怎么设置样式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JS怎么设置样式”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
1.任何支持 style 特性的HTML元素在 JavaScript 中都对应着有一个 style 属性，指向一个 CSSStyleDeclaration 的一个实例对象，包含该元素的内嵌style样式(直接定义在HTML元素上的style)。
对于使用短线分割的CSS属性，在JavaScript中转为驼峰式。
几个常见的属性：
| CSS属性 | JavaScript属性 |
| background-image | style.backgroundImage |
| color | style.color |
| display | style.display |
| font-family | style.fontFamily |
| height | style.height |
| width | style.width |
有一个CSS属性--->float，不能直接转换为JavaScript的属性，因为 float 在Javascript中是保留字。在 IE9+，Firefox、Safari、Opera、Chrome 中是 cssFloat，在同时所有IE也支持 styleFloat 。
以上改变样式，会直接自动更新元素的表现。在标准模式下所有度量值都必须指定一个度量单位，如果没有设置会被忽略。
2.“DOM2级样式”中为 style 对象新添加的属性和方法
| cssText | 返回或设置style的CSS代码 | testDiv.style.cssText = "width:25px; height: 100px;background-color:green"; console.log(testDiv.style.cssText); |
| length | CSS属性的数量 | console.log(testDiv.style.length); |
| parentRule | 返回表示CSS信息的CSSRule对象 | |
| getPropertyCSSValue(propertyName) | 返回包含给定属性名的CSSValue对象 | 返回的对象包含连个属性：cssText -->该属性的的字符串值； cssValueType -->css类型，数字常量，0（继承的值）、1（基本的值）、2（值列表）、3（自定义的值） |
| getPropertyValue(propertyName) | 返回给定属性的字符串值 | testDiv.style.getPropertyValue("background-color"); |
| getPropertyPriority(propertyName) | 如果给定的属性使用了“!important"，返回important，否则返回空字符串 | |
| item(index)/方括号语法[index] | 返回给定索引的CSS属性名称 | testDiv.style.item(1); testDiv.style[1]; |
| removeProperty(propertyName) | 删除给定的属性 | |
| setProperty(propertyaName,value,priority) | 设置属性，及优先级（“important”或空字符串） |
var testDiv = document.getElementById("test");
testDiv.style.backgroundColor = "red";
for(var i=0, len=testDiv.style.length;i<len;i++){ // IE 9+、Safari、Chrome、Firefox、Opera 9+
var prop = testDiv.style[i]; var value = testDiv.style.getPropertyValue(prop); console.log(prop + ": " + value);
}
testDiv.style.cssText = "width:25px; height: 100px;background-color:green";console.log(testDiv.style.cssText);浏览器支持：IE9+、Firefox、Safari、Opera 9+、Chrome
3.计算的样式，document.defaultView.getComputedStyle()
计算样式都是只读的，也包含浏览器默认CSS值，而有些属性各个浏览器默认值也不同。
getComputedStyle(element,pseudo-element)，element是要计算样式的元素，pseudo-element是伪元素(":after"、“:before”)，没有伪元素也可以是null。返回的是一个CSSStyleDeclaration对象
<style>
#mydiv{ background-color: blue; width: 100px; height:200px;
}</style><div id="mydiv" style="background-color: red; border: 1px solid black"></div>var mydiv = document.getElementById("mydiv");
var computedStyle = document.defaultView ? document.defaultView.getComputedStyle(mydiv,null) : mydiv.currentStyle; // IE8- 不支持document.defaultView，所有IE都支持currentStyle
console.log(computedStyle.backgroundColor); // rgb(255, 0, 0) ,IE: red
console.log(computedStyle.width); // 100px
console.log(computedStyle.height); // 200px
console.log(computedStyle.border); //1px solid rgb(0, 0, 0) ， IE9+：空字符串，IE8-：undefined
console.log(computedStyle.borderLeftWidth); // 1px颜色的返回值在各个浏览器也不同，有的会转化RGB格式。
border是一个综合属性，它包含四个边的边框宽度、颜色、类型等，各个浏览器解析不一样。所以 computedStyle.border 有的返回有的为空。
4.操作样式表
DOM2提供了操作样式表的接口，可以操作通过<link>包含的样式表和在<style>中定义的样式。
到此，关于“JS怎么设置样式”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
