`
guohui_fz
  • 浏览: 56474 次
  • 性别: 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获取设置div的高度和宽度兼容任何浏览器.docx

    本文将详细介绍如何使用JavaScript来获取和设置`div`的高度和宽度,并确保这些操作能够在不同的浏览器中正常工作。 #### 获取 div 高度和宽度 1. **使用 `offsetHeight` 和 `offsetWidth`:** - **定义**:`...

    javascript 获取图像信息

    根据给定文件中的标题、描述、标签以及部分内容,我们可以总结出以下有关JavaScript获取图像信息的知识点: ### 一、概述 ...以上就是关于如何使用JavaScript获取图像信息的详细说明。希望对你有所帮助!

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

    在探讨如何使用JavaScript获取标签ID并改变其style属性之前,我们需要了解几个关键的Web开发知识点,包括HTML元素的ID属性、JavaScript中的DOM操作以及CSS样式的应用方式。以下将详细阐述这些概念,并结合给定的代码...

    javascript获取隐藏元素(display:none)的高度和宽度的方法

    例如,以下是一个使用jQuery库的JavaScript函数,用以获取隐藏元素的尺寸: ```javascript function getDefaultStyle(obj, attribute) { return obj.currentStyle ? obj.currentStyle[attribute] : document....

    JavaScript修改css样式style

    - `element.style.property`:通过这个语法,可以获取或设置指定元素的 CSS 样式。例如,`document.getElementById('myDiv').style.color = 'red'` 将改变 ID 为 'myDiv' 的元素的颜色为红色。 - 注意,这种方式...

    javascript获取非行间样式的方法

    本篇文章主要探讨的是如何使用JavaScript获取非行间样式的值,这对于理解和优化网页样式操作至关重要。 首先,我们要明白CSS样式分为行内样式、内部样式(位于`<style>`标签内)和外部样式(引用的CSS文件)。行内...

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

    下面是一个简单的JavaScript示例代码,展示如何使用正则表达式匹配`<div>`和`<style>`标签: ```javascript // 示例字符串,包含div和style标签 var htmlString = '<div>这是一个div标签的内容。<style>这是style...

    获取style标签和外联(link)样式表

    本话题主要探讨如何在JavaScript中获取这两种类型的样式表——即内部<style>标签中的样式规则和外部引用的样式表规则。 在JavaScript中,我们通常使用DOM(文档对象模型)来操作HTML元素。对于获取<style>标签中的...

    JavaScript CSS Style属性对照表

    对照表可能包含以下内容:CSS属性、其JavaScript等价物、以及如何在JavaScript中读取和设置这些属性。例如,CSS中的`font-size`在JavaScript中对应`style.fontSize`,`background-color`对应`style.backgroundColor`...

    CSS独立地获取设置和动画背景位置值_JavaScript_下载.zip

    在JavaScript中,我们可以使用`style`对象来获取和设置这一属性,甚至创建自定义动画。理解这些原理对于实现交互性和动态效果至关重要。在实际项目中,你可以结合CSS和JavaScript,为用户提供更加丰富和个性化的视觉...

    CSS和JavaScript标签style属性对照表

    本文将详细介绍CSS中的样式属性与JavaScript中对应的`style`属性之间的关系,并通过具体示例帮助读者更好地理解和应用这些属性。 #### CSS与JavaScript中的Style属性对照 以下是对CSS和JavaScript中style属性的...

    CSS 和 JavaScript 标签 style 属性对照表

    从给定的文件信息来看,我们探讨的主题是CSS与JavaScript在...总之,CSS和JavaScript的结合使用,使得网页不仅美观,还具有丰富的动态交互效果。掌握这两种技术的协同工作,对于任何前端开发者来说都是至关重要的技能。

    javascript 获取iframe里页面中元素值的方法

    IE方法:document.frames[‘myFrame’].document.getElementById(‘test’).value; 火狐方法:document.getElementById(‘myFrame’).contentWindow.document.getElementById(‘test’).value; ...

    javascript获取隐藏元素(display-none)的高度和宽度的方法.docx

    ### JavaScript 获取隐藏元素 (display: none) 的高度和宽度的方法 #### 一、问题背景与需求分析 在前端开发过程中,经常会遇到需要获取隐藏元素尺寸的情况。这些元素可能因为某些逻辑原因被设置为 `display: none...

    js(javascript)获取网页源码

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

    javascript获取浏览器相关属性

    根据提供的文件信息,我们可以提取并总结出以下几个与“JavaScript 获取浏览器相关属性”相关的知识点: ### 一、设置浏览器主页 ...希望以上知识点能够帮助您更好地理解和应用JavaScript来获取浏览器相关属性。

Global site tag (gtag.js) - Google Analytics