在JavaScript中获取元素StyleSheet样式 [英] Get Element StyleSheet Style in JavaScript

问题描述

我一直使用Pro.js技术中的John Resig的 getStyle 函数来获取元素的样式：

  function getStyle（elem，name）{
 // J / S Pro Techniques p136 
 if（elem.style [name]）{
 return elem .style [name]; 
} else if（elem.currentStyle）{
 return elem.currentStyle [name]; 
} 
 else if（document.defaultView&& document.defaultView.getComputedStyle）{
 name = name.replace（/（[AZ]）/ g， -  $ 1） ; 
 name = name.toLowerCase（）; 
 s = document.defaultView.getComputedStyle（elem，）; 
 return s&&& s.getPropertyValue（name）; 
} else {
 return null;但是这个方法返回一个元素的默认样式，如果没有的话，这个方法会返回一个默认的样式。
} 
} 
  

$ b <样式：

http：/ /johnboxall.github.com/test/getStyle.html

是否可以只获取元素的样式表指定样式（如果样式未定义，则返回null） p>

更新：

为什么我需要这样的野兽？我正在构建一个小组件，允许用户对样式元素。可以应用的样式之一是 text-align - left ， center ， right - 使用 getStyle untyled元素默认为 center 。这使得无法判断元素是否居中，因为用户希望它居中或者是中心，因为这是默认样式。

解决方案

可以只获取
样式表指定的样式
元素（如果样式
未定义，则返回null）

这是有效的例程。问题是，在大多数情况下，大多数样式不是未定义 - 它们是由单个浏览器的内部样式表继承和/或定义的。

您可以用大量的努力，通过全部的定义所述风格的规则，在全部在文档的当前视图中的样式表，评估他们的有问题的元素，如果没有应用...和如果没有应用于父（或这个特定的风格是不继承）...然后考虑它未定义。这会很慢，并且难以置信地容易出错。我不建议尝试。

也许你会更好地退一步，问你为什么会需要这样的东西？

I've been using John Resig's getStyle function from Pro JavaScript Techniques to get the style of elements:

function getStyle(elem, name) {
    // J/S Pro Techniques p136
    if (elem.style[name]) {
        return elem.style[name];
    } else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    else if (document.defaultView && document.defaultView.getComputedStyle) {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    } else {
        return null;
    }
}

However this method returns default styles for an element if no style is specified:

http://johnboxall.github.com/test/getStyle.html

Is it possible to get only the stylesheet specified styles of an element (and return null if the style is undefined)?

Update:

Why do I need such a beast? I'm building a small component that allows users to style elements. One of the styles that can be applied is text-align - left, center, right - Using getStyle unstyled elements default to center. This makes it impossible to tell whether the element is centered because the user wanted it to be centered or is centered because that's the default style.

解决方案

Is it possible to get only the stylesheet specified styles of an element (and return null if the style is undefined)?

That's effectively what is done by the routine you present. The problem is, in most scenarios, most styles are not undefined - they're inherited and/or defined by the individual browser's internal stylesheet.

You could, with a whole lot of effort, iterate through all of the rules defining the style in question, in all of the stylesheets in the current view of the document, evaluate them for the element in question, and if none applied... and if none applied to a parent (or this particular style is not inherited)... then consider it undefined. This would be slow, and incredibly error-prone. I would not recommend trying it.

Perhaps you would do better to step back and ask why you would ever need such a thing?

这篇关于在JavaScript中获取元素StyleSheet样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！