用js设置CSS样式,js设置元素的css样式
如何用JS修改已加载的CSS样式表样式？
js是无法直接修改css文件的，但可以通过取对象的方式修改对象的样式，通常有两种方法：
成都创新互联公司长期为上1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为永定企业提供专业的网站制作、成都网站制作，永定网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
1、改变className，但首先在样式表中预设定样式类。
例如：document.getElementById('obj').className='...';
2、改变cssText。
例如：document.getElementById('obj').style.height='100px';
JS修改CSS设置的样式
语法：元素.style.样式名=样式值
注意：如果CSS的样式名中含有-，这种名称在JS中是不合法的，比如 background-color 。需要将这种样式名修改为驼峰命名法：去掉-，然后将-后的第一个字母大写，比如 backgroundColor
我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
所以尽量不要为样式添加!important
语法：元素.style.样式名
通过style属性设置和读取的都是内联样式，无法读取样式表中的样式
语法:元素.currentStyle.样式名
如果当前元素没有设置该样式，则获取它的默认值
例如： box1.currentStyle.width
这个方法是window的方法，可以直接使用需要两个参数
第一个:要获取样式的元素
第二个:可以传递一个伪元素，一般都传null
该方法会返回一个对象，对象中封装了当前元素对应的样式
可以通过对象﹒样式名来读取样式
如果获取的 样式没有设置 ，则会获取到真实的值，而不是默认值
比如:没有设置width，它不会获取到auto，而是 一个长度
注意：通过currentStyle和getComputedstyle()读取到的样式都是只读的，不能修改,如果要修改必须通过style属性
参数：
obj 要获取样式的元素
name 要获取的样式名
JavaScript是如何改变网页的CSS样式的？
通常我们将网页的样式和内容分开，样式放在css文件，内容放在html文件，当html文件需要用到样式的时候，直接引用css中定义的样式就可以了。其实JavaScript也能使用css文件或直接改变样式的属性来动态的改变网页的样式。
1、JavaScript设置内联样式
改变样式最直接的方法就是改变元素节点的style属性。如：
myElement.sytle.color = “red”;
myElement.sytle.left = “40px”;
myElement.sytle.backgroundRepeat = “repeat-x”;
JavaScript设置内联样式时，采用和css设置样式一样的风格。如设置myElement的color属性时，我们可以赋值任何在css中可以用的值，所以这里除了可以使用”red”，还可以使用”blue”, ”yellow”或十六进制的”#ff0000”。
另外用JavaScript改变网页的属性还需要注意2点：
l JavaScript中采用驼峰命名法：在css中，属性名中的单词之间是用横杠隔开，如font-weight, background-color。但在JavaScript中，横杠可能被认为是减号，所以采用驼峰命名法，单词之间不用横杠，如font-weight在JavaScript中应该写成fontWeight;而background-color写成backgroundColor。
l JavaScript中属性值为字符串：在css中，属性值都写在双引号中，即要用字符串来给css相关属性赋值，同样当属性值有单位时，我们需要将单位也写在字符串中。
2、JavaScript设置外部样式
当你需要改变的样式已经在css文件中定义了，我们也可以用JavaScript直接用定义好的css样式。如下格式：
myElement.className = “someCSSclass”;
同样需要注意几点：
l 不要将className写成class，因为class是JavaScript保留的关键字，我们不能使用。
l 将定义在css中的样式直接赋值给className，就能改变myElement元素的样式。
l 当要删除元素的样式，可以给className属性赋值为空。如：
myElement.className = “”;
教程网 站-秒秒学上的JavaScript课程有一个章节专门讲解JavaScript改变样式的内容，可以看看，希望对你有帮助。
JS 动态修改CSS 样式方法/全局
如何配置自行百度
1.scss文件定义变量
2.js中更改$textColor 变量的值
都是获取DOM
通过DOM分别修改当前DOM样式属性值、
当前DOM整体css样式、
修改当前DOM的className类名、
将link引入的标签作为DOM 修改link的href，从而修改引用的样式表。
详情转自：
js怎么修改css样式
js:
el.style.display = 'value' // el 为DOM元素，display为要设置的属性（width，height，等，采用驼峰式命名法），value为想要设置的值
jQ
$('.class').css('name', 'value');
或者
$('.class').css({
name1: value1,
name2: value2,
'backgroud-color': 'red'
})
键值可以使用驼峰式命名法
js中用cssText设置css样式的简单方法
如果网页中一个
id为“no”的标签，暂且当div标签来tell；
想要在js中设置这个div的css样式，很一般的做法是：
var
obj
=
document.getElementByIdx_x_x('no');
obj.style.width
=
'400px';
obj.style.height
=
'300px';
如果要设置一堆又一堆的css样式呢，太麻烦了把、
一般情况下都会结合css来添加className或者改变className达到想要的效果，但是如果你create一个元素，难道还想这样简单点？那就要想别的办法了~
于是大家就写了一个又一个的函数，经典的两个是：
var
obj
=
document.getElementByIdx_x_x('no');
function
setStyle(obj,
css)
{
for(var
attr
in
obj){
obj.style[attr]
=
css[attr];
}
}
setStyle(obj,{width:"400px",height:"300px"});
当然还有更简单的，cssText：
var
obj
=
document.getElementByIdx_x_x('no');
obj.style.cssText
=
"width:400px;
height:300px;";
当然这种方法对于create的元素初始化css样式来说很简单很方便。
以上就是小编为大家带来的js中用cssText设置css样式的简单方法的全部内容了，希望对大家有所帮助，多多支持脚本之家~
网站名称：用js设置CSS样式,js设置元素的css样式
分享路径：http://ybzwz.com/article/dsddpei.html
