资讯专栏INFORMATION COLUMN

DOM疑惑点整理(二)内联、嵌入、外联样式访问

Lucky_Boy / 869人阅读

摘要:内联样式外联样式样式属性,写在外部文件,通过链接导入。内联样式注意点样式的应用,采取就近原则,因此一般情况优先级是内联样式嵌入样式外联样式。中有新的方式去查看完整的属性某元素内联外联嵌入样式合起来计算后的属性。

访问的style属性为空?

有时候,直接通过某元素的style属性去查看相关信息时,会发现查看到的是空的属性。
原因很简单,style属性只能访问内联样式,而你把css写在了外部文件。
不是很清楚内联样式,可以看下面的解释:
内联样式:直接加在某个元素属性中的样式。

外联样式

嵌入样式:样式的属性内容写在该网页代码中。


    


    

内联样式

外联样式:样式属性,写在外部文件,通过链接导入。


    


    

内联样式

注意点:css样式的应用,采取就近原则,因此一般情况优先级是:内联样式>嵌入样式>外联样式。(但如果外联样式的link语句在嵌入样式之后,那么外联样式由于离元素更近,优先级就高于嵌入样式了)

css样式访问注意点

①虽然通过style属性,只能访问内联元素样式,但我们通常还是利用style属性来改变css样式。
②不建议利用style属性去查看一个元素的样式,因为你很可能无法得到正确样式。Dom2中有新的方式去查看完整的属性(某元素内联、外联、嵌入样式合起来计算后的属性)。
方法如下:

    function showComputedStyles(){
        const myDiv = document.getElementById("myDiv");  //假设有个myDiv
        if(myDiv.currentStyle){      //IE不支持getComputedStyle方法
            let computedStyle = myDiv.currentStyle;
            console.log(computedStyle.backgroundColor);   
        }else{                       //非IE浏览器可以用getComputedStyle方法
            let computedStyle = document.defaultView.getComputedStyle(myDiv,null); 
            console.log(computedStyle.backgroundColor); 
        }
    }

注意点:通过这样的方式得到的属性,都是经计算后的,同时也是只读的。但十分建议用这种方式去查看元素的属性。关于修改属性,还是得用style属性或者setAttribute。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94248.html

相关文章

  • 【分享】WeX5的正确打开方式(2)

    摘要:部分先打开源码点击编辑器左下角的标签熟悉开发的同学一眼就能看出,这是模块化的写法。在中使用外联样式也是按需加载的,编写方式跟正常的开发一样的。官方建议的也是使用外联样式,降低后期维护成本。 我的上篇文章介绍了WeX5中基本的页面布局和交互事件写法,有人私信我为什么源码中的js要那样写,HTML源码的结构是怎样的之类。那今天就总结一下Hello World的源码结构,才识有限,有疑问欢迎...

    13651657101 评论0 收藏0
  • 根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘(repaints)与回流(reflows)

    摘要:渲染阻塞在浏览器进行加载时,其实是并行加载所有资源。则就叫称为重绘。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 前面有讲到当用户在浏览器输入url之后,经过一系列的过程,会最终向服务器请求到文档数据,文档数据请求到之后,浏览器会将这些数据传给浏览器渲染引擎,渲染引擎开始正式工作了。 构建...

    phodal 评论0 收藏0
  • 根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘(repaints)与回流(reflows)

    摘要:渲染阻塞在浏览器进行加载时,其实是并行加载所有资源。则就叫称为重绘。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 前面有讲到当用户在浏览器输入url之后,经过一系列的过程,会最终向服务器请求到文档数据,文档数据请求到之后,浏览器会将这些数据传给浏览器渲染引擎,渲染引擎开始正式工作了。 构建...

    daryl 评论0 收藏0
  • 根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘(repaints)与回流(reflows)

    摘要:渲染阻塞在浏览器进行加载时,其实是并行加载所有资源。则就叫称为重绘。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 前面有讲到当用户在浏览器输入url之后,经过一系列的过程,会最终向服务器请求到文档数据,文档数据请求到之后,浏览器会将这些数据传给浏览器渲染引擎,渲染引擎开始正式工作了。 构建...

    ranwu 评论0 收藏0
  • DOM样式操作

    摘要:方法返回的是内联样式的声明内容元素属性名称属性中对象提供了属性返回对象中对应中所有样式属性提供的对象封装了所有样式属性得到样式属性对应的值,字符串类型将其转换为类型用属性获取获取页面的属性值为的元素直接使用属性获取内联样式获取内嵌与外联样式 getAttribute()方法 返回的是内联样式的声明内容 //元素.getAttribute(属性名称); var btn=element.g...

    Noodles 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<