前端学习（七十三） DOM-样式操作（Dom）

样式操作

style属性

HTMLElement.style能够访问和修改元素的内联样式，可以直接通过内联样式获取到内联样式的属性

例如：

            var a=document.getElementById('aaa');
            console.log(a.style.width);     
            console.log(a.style.height);

也可以直接赋值修改

            var a=document.getElementById('aaa');
            a.style.width=100+'px'

cssTest

这个属性可以一次性获取元素所有的css属性

            var a=document.getElementById('aaa');
            a.style.cssText

也可以一次性修改多个属性

            var a=document.getElementById('aaa');
            a.style.cssText=‘width:100px;height:100px’

setAttribute()

这个方法可以一次性修改多个css属性

            var a=document.getElementById('aaa');
             a.setAttribute('style','width:100px;background:#000;height:100px')

注意的是，style只能获取元素样式表的样式，但不一定是真实应用到元素样式，样式还有可能有其他的声明相互影响

getComputedStyle方法

与style不同，这个方法可以获取到最终真实应用在元素上的css属性对象，包括内联属性和样式表属性

var style = window.getComputedStyle(element[,pesudoElt])

element：需要获取样式的元素
pesudoElt：描述伪类的一个字符串

示例，style和getComputedStyle的区别

            var a=document.getElementById('aaa');
            var b=window.getComputedStyle(a);
            console.log(a.style.width);     //100
            console.log(a.style.height);    //空值

            console.log(b.width);   //100
            console.log(b.height);  //100

可以看出，style的方式div的内联样式并没有被获取到，而getComputedStyle都获取到了

操作类名

HTMLElement.className

对于在样式表使用css类选择器定义的CSS样式，可以修改元素的类名来操作css样式

            var a=document.getElementById('aaa');
            a.className='b'

这样元素a的className（也就是a上的类名）就被替换成了b

操作样式表

案例：动态加载css样式片段

            function insertCSS(css){
                var style = document.createElement('style');
                style.type='text/css';
                style.appendChild(document.createTextNode(css))
                var head=document.getElementsByTagName('head')[0];
                head.appendChild(style)
            }
            insertCSS('body{background:gray}')

案例：动态插入或修改css外部样式表

            function loadStyle(url){
                var link = document.createElement('link');
                link.style = 'text/css';
                link.rel = 'stylesheet';
                link.href = url;
                var head = document.getElementsByTagName('head')[0];
                head.appendChild(link);
            }
            loadStyle('/css/style.css');

动态插入或修改css外部样式表的的实际应用就是换肤功能

CSSStyleSheet

规则集，有时间再仔细看一下

前端学习（七十三） DOM-样式操作（Dom）

猜你喜欢