用javascriptgetComputedStyle获取和设置style的原理_javascript技巧
作者:吕志心可和 | 来源:互联网 | 2018-05-14 03:02
这两天用了baidu百度空间中的弹出窗口js,感觉不错,很强大,很好很简单的解决了好几个问题,界面友好度以及美化也好多了,以前都是硬邦邦window.open();
有兴趣的朋友搜索"百度 popup"就好了,已经有人给出了注释,强大。
最有意思的是用Javascript获取和设置style
DOM标准引入了覆盖样式表的概念,当我们用document.getElementById("id").style.backgroundColor 获取样式时 获取的只是id中style属性中设置的背景色,如果id中的style属性中没有设置background-color那么就会返回空,也就是说如果id用class属性引用了一个外部样式表,在这个外部样式表中设置的背景色,那么不好意思document.getElementById("id").style.backgroundColor 这种写法不好使,如果要获取外部样式表中的设置,需要用到window对象的getComputedStyle()方法,代码这样写window.getComputedStyle(id,null).backgroundColor
但是兼容问题又来了,这么写在firefox中好使,但在IE中不好使
两者兼容的方式写成
window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];
如果是获取背景色,这种方法在firefox和IE中的返回值还是不一样的,IE中是返回"#ffff99"样子的,而firefox中返回"rgb(238, 44, 34) "
值得注意的是:window.getComputedStyle(id,null)这种方式不能设置样式,只能获取,要设置还得写成类似这样id.style.background="#EE2C21";
推荐阅读
-
web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ...
[详细]
蜡笔小新 2023-12-11 11:25:16
-
本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ...
[详细]
蜡笔小新 2023-12-09 03:01:43
-
-
我只是互联网中的菜鸟一个,由于心血来潮也整了一个个人站,但在网络中游荡了大半个世纪,才发现给网站定位是多么的重要,只有好的运营模式及盈利模式,网站才能发展的更好,否则累死也赚不服务 ...
[详细]
蜡笔小新 2023-10-16 13:31:24
-
一、pyecharts介绍ECharts,一个使用JavaScript实现的开源可视化库,可以流畅的运行在PC和移动设备上,兼容当前绝大部 ...
[详细]
蜡笔小新 2023-10-16 08:29:03
-
搭建环境:本机所使用环境:Selenium2.53.6Firefox44python3.6pycharm5.0.3安装步骤:1.官网下载p ...
[详细]
蜡笔小新 2023-10-14 11:51:34
-
ImgettingabugwithInternetExplorer.Theiframedoesnthavecorrectsizeanditisdisplayedo ...
[详细]
蜡笔小新 2023-10-12 20:54:23
-
本文介绍了网页播放视频的三种实现方式,分别是使用html5的video标签、使用flash来播放以及使用object标签。其中,推荐使用html5的video标签来简单播放视频,但有些老的浏览器不支持html5。另外,还可以使用flash来播放视频,需要使用object标签。 ...
[详细]
蜡笔小新 2023-12-10 13:24:30
-
本文详细解析了Apache Shiro 身份验证绕过漏洞 (CVE202011989) 的原理和影响,并提供了相应的防范措施。Apache Shiro 是一个强大且易用的Java安全框架,常用于执行身份验证、授权、密码和会话管理。在Apache Shiro 1.5.3之前的版本中,与Spring控制器一起使用时,存在特制请求可能导致身份验证绕过的漏洞。本文还介绍了该漏洞的具体细节,并给出了防范该漏洞的建议措施。 ...
[详细]
蜡笔小新 2023-12-09 19:58:36
-
场景1.IE,Firefox浏览器访问不了网站,谷歌浏览器可以,返回错误码DNS_PROBE_POSSIBLE.2.pingwww.qq.com可以ping通,ping局域 ...
[详细]
蜡笔小新 2023-10-17 17:55:37
-
python+selenium十:基于原生selenium的二次封装fromseleniumimportwebdriverfromselenium.webdriv ...
[详细]
蜡笔小新 2023-10-17 17:28:31
-
作者|MitchellBaker责编|弯月出品|CSDN(ID:CSDNnews)如果想改变互联网,我们就不能故步自封。我加 ...
[详细]
蜡笔小新 2023-10-17 14:56:13
-
JavaScript在常人看来都是门出不了厅堂的小语言,仅管它没有明星语言的闪耀,但至少网页的闪耀还是需要它的,同时它是一门很实用的语言,本人平时就喜欢拿它来写点实用工具或应用,本文演示用JavaSc ...
[详细]
蜡笔小新 2023-10-13 09:49:41
-
JavaScript概述1.JavaScript定义JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言。它是弱类型语言,只能由浏览器解释执行。其中:脚本语言:解释运行( ...
[详细]
蜡笔小新 2023-10-13 09:36:45
-
JavaScript实现在页面间传值的方法-本文实例讲述了JavaScript实现在页面间传值的方法。分享给大家供大家参考。具体如下:问题如下:在a.html页面中,的 ...
[详细]
蜡笔小新 2023-10-13 01:38:28
-
Ihavefollowingjsonarraywhichisgeneratedatruntime.Hencethenumberofnamedatapairsvarie ...
[详细]
蜡笔小新 2023-10-12 21:52:44
-