摘要:内联样式外联样式样式属性,写在外部文件,通过链接导入。内联样式注意点样式的应用,采取就近原则,因此一般情况优先级是内联样式嵌入样式外联样式。中有新的方式去查看完整的属性某元素内联外联嵌入样式合起来计算后的属性。
访问的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
摘要:渲染阻塞在浏览器进行加载时,其实是并行加载所有资源。则就叫称为重绘。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 前面有讲到当用户在浏览器输入url之后,经过一系列的过程,会最终向服务器请求到文档数据,文档数据请求到之后,浏览器会将这些数据传给浏览器渲染引擎,渲染引擎开始正式工作了。 构建...
摘要:渲染阻塞在浏览器进行加载时,其实是并行加载所有资源。则就叫称为重绘。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 前面有讲到当用户在浏览器输入url之后,经过一系列的过程,会最终向服务器请求到文档数据,文档数据请求到之后,浏览器会将这些数据传给浏览器渲染引擎,渲染引擎开始正式工作了。 构建...
摘要:渲染阻塞在浏览器进行加载时,其实是并行加载所有资源。则就叫称为重绘。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 前面有讲到当用户在浏览器输入url之后,经过一系列的过程,会最终向服务器请求到文档数据,文档数据请求到之后,浏览器会将这些数据传给浏览器渲染引擎,渲染引擎开始正式工作了。 构建...
阅读 1240·2021-11-23 09:51
阅读 3376·2021-09-06 15:00
阅读 958·2021-08-16 10:57
阅读 1353·2019-08-30 12:46
阅读 910·2019-08-29 12:22
阅读 1544·2019-08-29 11:07
阅读 3124·2019-08-26 11:23
阅读 2965·2019-08-23 15:14