Getting an element's style
It is occasionally useful to get a specific element's actual style, after all CSS rules have been applied. You might
naively assume that an element's style property will give you this, but you would be mistaken. That only returns the
contents of the element's style attribute. To get the final style (including any styles defined in external stylesheets),
you need to use the getComputedStyle function.
To illustrate this, let's create a simple test page. It defines a style for all <p> elements, but then one of the <p>
elements overrides that with its style attribute.
<html>
<head>
<title>Style test page</title>
<style type="text/css">
p { background−color: white; color: red; }
</style>
</head>
<body>
<p id="p1">This line is red.</p>
<p id="p2" style="color: blue">This line is blue.</p>
</body>
</html>
Example: Get the styles defined by an element's style attribute
var p1elem, p2elem;
p1elem = document.getElementById('p1');
p2elem = document.getElementById('p2');
alert(p1elem.style.color); // will display an empty string
alert(p2elem.style.color); // will display "blue"
That wasn't terribly helpful, and you should never use element.style to get individual styles. (You can use it to set
individual styles; see Setting an element's style.)
So what should you use instead? getComputedStyle().
Example: Get the actual style of an element
var p1elem, p2elem, p1style, p2style;
p1elem = document.getElementById('p1');
p2elem = document.getElementById('p2');
p1style = getComputedStyle(p1elem, '');
p2style = getComputedStyle(p2elem, '');
alert(p1style.color); // will display "rgb(255, 0, 0)"
alert(p2style.color); // will display "rgb(0, 0, 255)"
分享到：
相关推荐
本文主要讨论两种主要的方法：`getComputedStyle` 和 `currentStyle`，它们用于获取元素的CSS样式信息，特别是那些通过class属性引用的外部样式表中的样式。 1. `getComputedStyle` 是一个DOM全局方法，主要在非IE...
function $(id) { return document.getElementById(id); } ``` 这样的简写使得代码更加简洁易读。 2. **getElementsByTagName 的简写**： 类似地，`getElementsByTagName` 可以通过创建辅助函数来简化： ```...
window.onload = function () { var box = document.getElementById('box'); var style = window.getComputedStyle ? window.getComputedStyle(box, null) : box.currentStyle; alert(style.cssFloat || style....
js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法： 代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性 return obj.currentStyle...
Base.prototype.animate = function (attr, step, target, t) { for (var i = 0; i ; i++) { var element = this.elements[i]; var timer = setInterval(function () { element.style[attr] = getStyle(element,...
function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } ``` 在这个函数中，`attr`是一个变量，用于动态地访问`...
function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //动画函数 obj---要执行动画的对象 json---要执行...
考虑到浏览器兼容性，这里使用了`window.getComputedStyle`和`currentStyle`来分别处理标准浏览器和IE浏览器的情况： ```javascript Base.prototype.css = function (attr, value) { for (var i = 0; i ; i++) { ...
要想获取HTML元素的计算样式一直都存在很多的兼容问题，各浏览器都会存在一些... 代码如下:var getStyle = function( elem, type ){ return ‘getComputedStyle’ in window ? getComputedStyle(elem, null)[type] :
_.currentStyle[$]:document.defaultView.getComputedStyle(_,false)[$]}function P(_,$){if(_)if($!=null)_.style.display=$;else return R(_,"display")}function I(G,_){var D=G.el?G.el.nodeName:"INPUT";if(_||...
function addEvent(element, event, handler) { if (element.addEventListener) { element.addEventListener(event, handler, false); } else { element.attachEvent('on' + event, function() { // 设置this为...
通用的JavaScript方法可以利用`window.getComputedStyle`获取元素的样式信息。例如： ```javascript function getOpacity(element) { var computedStyle = window.getComputedStyle(element, null); var ...
在实际应用中，为了兼容各种浏览器，我们可以编写一个通用的函数来获取元素的宽高，考虑`offsetWidth`、`offsetHeight`以及`getComputedStyle`和`currentStyle`： ```javascript function getElementSize(el, prop)...
- 示例代码：`function getStyle(obj, attr) { return obj.style[attr] || window.getComputedStyle(obj, false)[attr]; }` #### 三、综合运用案例分析 以下是一个简化的示例代码，用于展示上述知识点的实际应用...
同时，为了兼容不同的浏览器，使用`window.getComputedStyle`获取元素的实时样式是必要的，因为它能返回包括浏览器默认值在内的完整计算样式。 以上就是关于“javascript经典特效---抖动的图片”这一主题的基本介绍...
var matrix = window.getComputedStyle(img).transform; return (matrix.split('(')[1].split(',')[0] || 0) * 1; } function setRotationAngle(img, angle) { img.style.transform = 'rotate(' + angle + 'deg)...
document.getElementById('draggableDiv').addEventListener('mousedown', function(event) { var div = this; var initialMouseX = event.clientX; var initialMouseY = event.clientY; var initialDivLeft = ...
具体代码如下：Js代码 代码如下:function getCss(elem, css){ if (window.getComputedStyle) { return window.getComputedStyle(elem, null)[css]; }else if (elem.currentStyle) { return elem.currentStyle...
大家一听这名字就知道，有了这套框架 网上的效果基本都是可以实现的。实际上之前的运动框架还是有局限性的，... return getComputedStyle(obj, null)[name]; } } function startMove(obj, attr, iTarget) { clearInt