合肥黑
合肥黑

通过JS控制CSS

参考
简单说 通过JS控制CSS的各种方式（上）
简单说 通过JS控制CSS的各种方式（下）
说明
通过JS控制CSS，我们能做出更多漂亮的页面特效，做出更炫的交互效果。今天我们来说说JS控制CSS的各种方式。

解释
JavaScript、CSS、HTML是前端三剑客，我们说正事之前，先来说说CSS与HTML的事。

一、在HTML中使用CSS有三种方式

参考
html中使用css的三种方式
CSS 引入方式

1、内联方式
CSS定义在单个的HTML元素中的style属性中



  
  
这是一个DIV标签为

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个

拥有相同的样式，你不得不重复地为每个
添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

2、内部样式表
CSS通过标签定义在HTML页面的标签中


    
    js测试
  
    
  

  
    

      
这是一个DIV

3、外部样式表
将CSS定义在一个外部的CSS文件中，在HTML页面通过标签引用CSS文件
二、JS控制CSS(注意以下方式会按优先级从高到低排序)

我们用JS控制CSS，我们还是要考虑css优先级的问题，为了能让设置后的css起作用，我们还是选择优先级高的方法比较好。

通过JS控制CSS_第1张图片
优先级

关于优化级测试，参考JavaScript中的style和className 




    
    Title

变绿了之后，就无法变红。这是因为style.的方式优先级更高。

0、访问style属性

任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。这个 style 对象是 CSSStyleDeclaration 的实例，只包含所有内联样式。

style 对象除了 css 样式属性外，还包含如下属性和方法：

  • cssText ：可读写，访问/修改内联样式的字符串值，与ele.geAttribute('style')的值相同。
  • length ：元素的 css 属性的数量，注意，某些 css 样式是多种样式的简写，如 "background" 其实包含 "background-image" 等样式，而此属性获取到的数量是非简写的数量。
  • getPropertyPriority(propertyName) ：获取 css 属性的优先级字符。即该样式设置了 "!important" 则返回 "important" ；否则返回空字符。
  • getPropertyValue(propertyName) ：获取 css 属性的值。
  • removeProperty(propertyName) ：移除指定 css 属性。
  • setProperty(propertyName, value, priority) ：设置指定 css 属性的值和优先级，priority 为空字符则表示不设置优先级。

可以看以下例子：

// 获取指定元素
let ele = document.getElementById('myDiv');
// 获取元素的 style 属性
let styl = ele.style;
console.log(styl.cssText);    // "background: red; color: green;"
// 修改字体大小为 "18px" , 注意要使用驼峰式
styl.fontSize = '18px';
// 设置 background 样式，并添加"优先级字符"
styl.setProperty('background', 'blue', 'important');
console.log(styl.getPropertyPriority('background'));    // "important"
console.log(styl.getPropertyValue('background'));       // "blue"
// 移除 "color" 样式
styl.removeProperty('color');
console.log(styl.cssText);              // "background: blue !important; font-size: 18px;"
console.log(ele.getAttribute('style')); // "background: blue !important; font-size: 18px;"
console.log(styl.length);               // 11
// 修改 cssText 属性
styl.cssText = ""
console.log(styl.cssText);              // ""

参考https://developer.mozilla.org/zh-CN/docs/Web/API/ElementCSSInlineStyle/style
**HTMLElement.style** 属性返回一个 CSSStyleDeclaration 对象，表示元素的 内联style 属性（attribute），但忽略任何样式表应用的属性。 通过 style 可以访问的 CSS 属性列表，可以查看 CSS Properties Reference。

由于 style 属性的优先级和通过style设置内联样式是一样的，并且在css层级样式中拥有最高优先级，因此在为特定的元素设置样式时很有用。

注意不能通过直接给style属性设置字符串（如：elt.style = "color: blue;"）来设置style，因为style应被当成是只读的（尽管Firefox(Gecko), Chrome 和 Opera允许修改它），这是因为通过style属性返回的CSSStyleDeclaration对象是只读的。

但是style属性本身的属性能够用来设置样式。此外，通过单独的样式属性（如elt.style.color = '...'）比用`elt.style.cssText = '...' 或者 elt.setAttribute('style', '...')形式更加简便，除非你希望完全通过一个单独语句来设置元素的全部样式，因为通过style本身属性设置的样式不会影响到通过其他方式设置的其他css属性的样式。

// 在单个语句中设置多个样式
elt.style.cssText = "color: blue; border: 1px solid black";
// 或者
elt.setAttribute("style", "color:red; border: 1px solid blue;");

// 设置特定样式，同时保持其他内联样式值不变
elt.style.color = "blue";
1、通过“ . ”直接设置元素的style属性

语法：

element.style.attributename= attributevalue;

例如：

document.body.style.width = '100px';

注意：这里的style属性的值是一个对象。 这个对象所包含的属性与CSS规则一 一对应，但是名字需要用驼峰命名的方式进行改变，比如background-color写成backgroundColor。改写的规则是将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写。如果CSS属性名是JavaScript保留字，则规则名之前需要加上字符串css，比如float写成cssFloat。

document.body.style.backgroundColor= 'red';

温馨提示： 如果你不愿意换成驼峰命名法的话，也有办法，用“[ ]”代替 “.” , “[ ]” 中直接写字符串类型的CSS属性。
例如：

document.body.style['background-color']= 'red';

如果你好奇为什么可以这样做，请看简单说 background-color 与 backgroundColor的区别

2、通过 setAttribute 方法 设置元素的style属性

setAttribute 方法添加指定的属性，并为其赋指定的值。
如果这个指定的属性已存在，则仅设置/更改值。

语法：

element.setAttribute(attributename,attributevalue)

例如：

var a = document.body;
a.setAttribute("style","background-color:red;height:100px;");

这个方法很好用，第一个参数写“style”，第二个参数就是CSS，把需要的CSS直接粘贴进去就可以了。

注意： 两个参数都是字符串类型的哦！

3、通过style对象的 setProperty 方法 设置CSS属性

setProperty 方法直接设置某个CSS属性

语法：

element.style.setProperty (propertyName, propertyValue, priority);

setProperty 方法的第三个参数（priority），字符串类型，指定样式属性的优先级。样式属性的优先级可以通过getPropertyPriority方法获取。
如果要设置!important，建议设置第三个参数 ，但是传参的时候不用写前面的 “!” 。
例如：

var a = document.body;
a.style.setProperty ("background-color", "green", 'important');

注意： setProperty 方法 与 setAttribute 方法 是不一样的，setProperty 方法是元素style属性的一个方法，setAttribute 方法是元素的一个方法，虽然他们都能控制CSS，但还是有区别的。

更多关于setProperty 方法的知识请看
http://help.dottoro.com/ljdpsdnb.php

4、通过style对象的cssText属性，控制CSS

style对象 的 cssText属性设置或返回样式声明的内容作为字符串。

语法：

element.style.cssText = string

例如：

document.body.style.cssText = "background-color:red";

注意： 直接用 “=” 会覆盖原来的值，需要追加新的值就用 “+=”

5、通过元素的 className 属性 控制CSS

我们可以通过先定义好class，然后改变元素的class属性，来控制CSS

元素的 className 属性设置或返回元素的 class 属性值。

语法：

element.className = 'className';

例如：

类似的还有classlist

  • classList 属性返回元素的类名，作为 DOMTokenList 对象。
  • 该属性用于在元素中添加，移除及切换 CSS 类。
  • classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。




菜鸟教程(runoob.com)





点击按钮移除 DIV 元素中的 "mystyle" 类.



注意： Internet Explorer 9 及更早 IE 版本浏览器不支持 classList 属性。



我是一个 DIV 元素。
6、通过创建 ，给元素加上样式

例如：
7、通过创建 标签，引入新的样式

我们可以先在外部创建一个CSS文件，然后通过JS创建 标签，在页面里引入新的样式，这个方法和 上面的创建