因为写js经常需要用到访问样式,我们常用的做法是通过 DOM.style.XXX来读写样式信息的。可是DOM.style这种写法只能访问,这样在标签里内置的样式,如果样式写在,或者.css文件里,那么就办法读到样式了。
其实呢,还有别的方法可以读到这些样式信息,方法有两种,一种是通过document.styleSheets对象,另一种是通过“最终样式”对象。其中 IE中这个对象叫做currentStyle,FF中这个对象叫做document.defaultView。
我采用的代码(没有YUI的精确,但基本够用)
getComputedStyle: function(elm, styleName) {
elm = Y.$(elm);
if( window.getComputedStyle ) {
return elm.ownerDocument.defaultView.getComputedStyle(elm, null)[styleName]; // window.getComputedStyle(elm, null)[styleName];
} else if( elm.currentStyle ) {
return elm.currentStyle[styleName];
}
}
分享到:
相关推荐
JavaScript中获取页面元素的...而通过name获取元素的方法适用于特定类型的元素,并且能够处理具有相同name属性值的多个元素。掌握这两种方法,对于任何使用JavaScript进行网页开发的开发者来说,都是必不可少的技能。
例如,使用`document.getElementById()`、`document.createElement()`、`element.style.property`等方法可以实现这些功能。 JavaScript教材和教程通常会覆盖基础语法、高级特性、前端框架(如React、Vue、Angular)...
`img.style`用于设置或返回`<img>`元素的样式属性。在此示例中,为了不影响页面布局,将新创建的图像元素隐藏起来。 ```javascript img.style.position = "absolute"; img.style.visibility = "hidden"; ``` #### 3...
CSS操作也是JavaScript的重要应用领域,通过修改元素的样式属性,可以实现动态效果。例如,当鼠标悬停在某个元素上时,改变背景颜色: ```javascript element.addEventListener("mouseover", function() { element...
12. 取得控件的绝对位置:通过JavaScript或VBScript可以获取页面上某个元素相对于文档顶部和左边的偏移值,这对于定位和布局非常有用。 13. 光标自动定位到文本框末尾:`onfocus="cc()"`事件绑定的函数`cc()`会确保...
- `document.getElementsByName("name1")`:这个方法返回一个NodeList对象,它包含了所有具有`name1`名称的元素。注意这里返回的是一个类似数组的对象,而不是真正的数组。 2. **循环遍历**: - 使用`for`循环...
总的来说,获取JavaScript中DOM元素的`top`, `left`, `width`, `height`值涉及多个方法和属性,具体使用哪种取决于你的需求,如精确的视口位置、CSS样式或相对于父元素的位置等。同时,浏览器信息的检测也是Web开发...
在JavaScript中,你可以使用`document.getElementById()`,`document.querySelector()`或`document.querySelectorAll()`等方法找到特定的HTML元素。然后,可以更改元素的属性,如`element.innerHTML`或`element....
总的来说,通过理解CSS伪元素的概念,结合JavaScript的 `getComputedStyle` 方法及其兼容性处理,开发者可以有效地获取到CSS伪元素的属性值,这在处理复杂的页面样式动态调整时是非常有用的。不过,需要注意的是,...
这段代码首先通过document.frames方法获取名为iframename的iframe对象,然后通过document属性访问其内部的document对象,最后使用jQuery选择器取得ID为objid的元素。 在jQuery 1.9版本之后,也可以使用contents()...
网页设计与开发是数字时代的重要技能之一,涵盖了HTML、CSS和JavaScript这三种核心技术。这些技术共同构成了网页的基础架构,...学习和熟练掌握HTML、CSS和JavaScript,对于想要在这个领域取得成功的人来说至关重要。
4. 表单元素:掌握创建表单的方法,包括输入框、按钮、复选框和单选按钮等。 **CSS (Cascading Style Sheets)** CSS是用于控制网页外观和布局的样式语言。在这个模块中,你将学习: 1. 选择器:了解ID选择器、类...
在原生JavaScript中,并没有内置的addClass()方法,这个方法通常在jQuery库中出现,用于向选定的元素添加一个或多个类。然而,在没有引入jQuery的项目中,我们可以通过编写自定义的JavaScript函数来实现类似的功能。...
在本篇文章中,我们将深入探讨与“javascript学习”这一主题相关的关键知识点,这些知识点主要源自提供的标题、描述、标签及部分内容。...希望这份详尽的知识点总结能帮助你在JavaScript的学习旅程中取得更大的进步!
JavaScript的`Math.random()`函数可以生成0到1之间的随机数,通过适当的方法可以转换为指定范围内的整数。 3. **DOM操作(Document Object Model Manipulation)**:修改HTML元素以显示抽奖结果。例如,可以改变中奖...
此外,JavaScript16还可能涵盖与Web开发密切相关的技术,如DOM操作(添加、删除、查找元素)、AJAX(异步JavaScript和XML,现在更多地使用fetch API)用于实现页面的无刷新更新,以及事件处理,使用户与网页的交互...
例如,使用jQuery,一行代码`$("#myElement").hide()`即可隐藏ID为“myElement”的元素,而无需编写复杂的JavaScript代码。jQuery还提供了丰富的插件和API,使开发者能够快速构建功能丰富的Web应用。 在“jquery和...
11.3.2 通过Flickr取得个性头像 11.4 小结 第12章 案例研究:用DOM设计选择列表 12.1 经典的感觉 12.2 构建更好的选择列表 12.3 策略?我们不需要臭哄哄的策略 12.3.1 相关的文件...
HTML文档由一系列的元素组成,这些元素通过标签来表示,如`<html>`、`<head>`、`<body>`等。...无论是初学者还是有经验的开发者,这些资料都将为你提供宝贵的学习资源和参考指南,助你在前端开发领域取得更大的进步。