原生JS获取及设置CSS样式-1.行内样式

面试中,应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧,让我给大家总结一下~

HTML中样式的写法不外乎以下四种方式

  1. 行内样式
<div style="color: blue; background-color: yellow !important;">假装有内容</div>
  1. head内部样式
<head>
    <style>
        div {
            width: 100px;
            line-height: 100px;
            background-color: red;
            border: 6px solid #ccc;
            text-align: center;
        }
    </style>
</head>
  1. 外链样式
<link rel="stylesheet" href="./index.css">
  1. 导入样式
@import url('xxx.css');

那么通过原生JS如何获取到这些样式,又如何设置呢?

WeChat2c1a0d25887cdc76a1cf76c1875c3a87.png
 
                                                                          getStyle-methods.PNG

一、原生JS操作行内样式

HTML + 行内样式

<div style="color: blue; background-color: yellow !important;">假装有内容</div>

JS

var divEle = document.querySelector('div');

1. 获取行内样式信息

var divStyle = divEle.style;
console.log(divStyle);

style对象是CSSStyleDeclaration的实例,包含着通过HTML的style特性指定的所有样式信息
但不包含与外部样式,或嵌入式样式层叠而来的样式

WeChat5bd5b9b012d4606f7e0fadd112d451be.png
 
                                                                               styleDec.PNG

短划线的css属性必须转换成驼峰大小写形式 (float是关键字,所以规定为cssFloat)

WeChat2895d1560baf3566ed216c023383ef40.png
 
                                                                               cssFloat.PNG

1.1 应用给元素的css属性的数量

console.log(divStyle.length); // 2

1.2 返回给定位置的 CSS 属性的名称 与length配套使用

console.log(divStyle.item(0)); // color

1.3 cssText: 通过它能够访问到 style 特性中的 CSS 代码
在读取模式下, cssText 返回浏览器对 style特性中 CSS 代码的内部表示

console.log(divStyle.cssText); // color: blue; background-color: yellow !important;

1.4 获取指定属性的值

console.log(divStyle.getPropertyValue('color')); // blue

1.5如果给定的属性使用了 !important 设置,则返回 “important” ;否则,返回空字符串

console.log(divStyle.getPropertyPriority('background-color')); // important

2. 设置行内样式

2.1 通过element.style设置

divStyle.color = '#FFF';
divStyle.backgroundColor = '#000';
WeChatd9418e27f3cbb88b2f72448da9d2dc38.png
 
                                                                           element.style.PNG

2.2 setProperty(属性, 属性值, 权重)第三个参数(可选): 优先权重 “important” 或者一个空字符串

divStyle.setProperty('color', 'green');
WeChat8c00eabdd3ab4dcf1d6f2f134ab6af7a.png                                                                         setProperty.PNG

2.3 cssText方式
在写入模式下,赋给 cssText 的值会重写整个 style 特性的值
设置 cssText 是为元素应用多项变化最快捷的方式,因为可以一次性地应用所有变化

divStyle.cssText = 'background-color: #FFF; color: orange;';
WeChat6d8e47f18c1a8c38ac897590dc0d7e6b.png                                                                            set-cssText.PNG

3.删除属性

removeProperty(propertyName) :从样式中删除给定属性
意味着将会为该属性应用默认的样式(从其他样式表经层叠而来)

console.log(divStyle.removeProperty('color')); // 返回给定属性的值 orange
WeChat411863a96b52195051cd85bb3dd8cb7f.png 
                                                                         remove-color.PNG

嘿嘿~

WeChatf2655db1f1475d0fe9fd78cbd816e033.png
 
                                                                                 timg1.jpg
请登录后发表评论