`
guohui_fz
  • 浏览: 54924 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

用javascript获取和设置style

阅读更多

这两天用了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";

参考:
JavaScript权威指南
http://bokee.shinylife.net/blog/article.asp?id=817
http://book.csdn.net/bookfiles/679/10067921329.shtml

分享到:
评论

相关推荐

    用javascript getComputedStyle获取和设置style的原理

    最有意思的是用javascript获取和设置style DOM标准引入了覆盖样式表的概念,当我们用document.getElementById(“id”).style.backgroundColor 获取样式时 获取的只是id中style属性中设置的背景色,如果id中的style...

    Javascript获取标签ID改变style属性的代码

    实例JavaScript代码 下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了。 代码如下: [removed] var d = document....

    JavaScript正则表达式匹配 div style标签

    主要介绍了JavaScript正则表达式匹配<div><style>标签 的相关资料,需要的朋友可以参考下

    js(javascript)获取网页源码

    //根据window.XMLHttpRequest对象是否存在使用不同的创建方式 if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式 } else { xmlHttp = new ActiveXObject(...

    【JavaScript源代码】JavaScript style对象与CurrentStyle对象案例详解.docx

    JavaScript style对象与CurrentStyle对象案例详解  1、Style对象 style对象代表一个单独的样式声明,可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式,即元素标签中style属性的值。 例子: ...

    JavaScript完全自学宝典 源代码

    6.7.html 各种使用JavaScript获取复选框值的方法。 6.8.html JavaScript控制复选框。 6.9.html 复选框的JavaScript特效。 6.10.html JavaScript取单选框的值。 6.11.html JavaScript控制单选框...

    JavaScript详解(第2版)

    1.8 JavaScript和事件 9 1.9 标准化JavaScript和W3C 11 1.9.1 JavaScript对象 12 1.9.2 文档对象模型 12 1.10 关于浏览器 13 1.10.1 JavaScript的版本 14 1.10.2 你的浏览器遵循标准吗 16 1.10.3 ...

    javascript完全学习手册1 源码

    1.3 在Web页面中使用JavaScript 5 1.3.1 HTML的基本结构 5 1.3.2 在HTML中嵌入JavaScript 7 1.3.3 链接JavaScript文件 9 1.4 编写JavaScript的工具 11 1.4.1 使用纯文本编辑器 11 1.4.2 使用专业化脚本编辑工具 13 ...

    javaScript 读取和设置文档元素的样式属性

    外部链接样式表文件 JavaScript获取和设置文档元素的css属性: 1.获取元素Style属性里面设置的样式属性, document.getElementById(id).style.height; 有,则返回属性值;没有则返回空 IE和火狐皆然,只是有的属性值...

    javascript 获取元素样式必杀技

    Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div xss=removed>hello),可以直接使用element.style.color来直接获取css属性的值; 2. 但是对于外部定义的css样式使用...

    javascript完全学习手册2 源码

    1.3 在web页面中使用JavaScript 1.3.1 HTML的基本结构 1.3.2 在HTML中嵌入JavaScript 1.3.3 链接JavaScript文件 1.4 编写JavaScript的工具 1.4.1 使用纯文本编辑器 1.4.2 使用专业化脚本编辑工具 ...

    老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)

    众所周知,CSS样式有三种类型:行内样式、内部样式和外部样式,JavaScript获取CSS样式时分为两种情况:行内样式获取法 和 非行内样式获取法 。 一、行内样式获取相对简单,通过element.style.attr(元素.style.属性...

    JS实现获取汉字首字母拼音、全拼音及混拼音的方法

    本文实例讲述了JS实现获取汉字首字母拼音、全拼音及混拼音的方法。分享给大家供大家参考,具体如下: 这里需要用到一个js获取汉字拼音的插件,可点击此处本站下载。 运行效果如下: 完整示例代码: <!DOCTYPE ...

    JavaScript改变CSS样式的方法汇总

    后面还会说说如何获取元素的真实样式和一个表单中的注意事项。 1、修改节点style(内联样式) 这种方法权重是最高的,直接写在节点的style属性上,他会覆盖其他方法设置的样式。使用方法很简单: var element = d

    JavaScript中无法通过div.style.left获取值的解决方法

    主要介绍了JavaScript中无法通过div.style.left获取值的问题分析及解决方法,需要的朋友可以参考下

    JAVASCRIPT style 中visibility和display之间的区别

    visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,hidden表示隐藏)。

    利用原生JavaScript获取元素样式只是获取而已

    ps:是获取样式,不是设置样式。若没有给元素设置样式值,则返回浏览器给予的默认值。...2、window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。 代码如下: window.getComputedStyle

    javascript获取元素CSS样式代码示例

    如果想用javascript获取一个元素的样式信息,首先想到的应该是元素的style属性,下面我们看看javascript如何获取元素CSS样式

Global site tag (gtag.js) - Google Analytics