文档章节

JavaScript获取DOM节点HTML元素CSS样式

hosser
 hosser
发布于 2015/03/21 01:32
字数 1046
阅读 5616
收藏 6

JavaScript获取DOM节点HTML元素CSS样式技术

maybe yes 发表于2015-01-10 18:07

原文链接 : http://blog.lmlphp.com/archives/59  来自 : LMLPHP后院

如何使用 JavaScript 获取某个 DOM 节点下 HTML 元素的 CSS 样式值?使用过 JQuery 的童鞋一定都非常的熟悉,Jquery 提供了非常强大的 CSS 方法,可以很方便的设置和获取元素的 style 属性。

某些情况下,我们不能使用 JQuery 时,就必须使用纯 JavaScript 获取元素的 style 属性值。本文将介绍使用纯 JavaScript 获取元素的的样式值。

使用 CSS 控制页面的四种方式,分别为行内样式(内联样式)、内嵌式、链接式、导入式,下面分别介绍。

行内样式(内联样式)即写在 HTML 标签中的 style 属性中控制元素样式,如下代码示例:

<div style="width:100px;height:100px;"></div>

内嵌样式即写在 style 标签中,如下代码示例:

<style type="text/css">
div{ width:100px; height:100px }
</style>

链接式即为用 link 标签引入css文件,如下代码示例:

<link href="/static/css/main.css?v=1" type="text/css" rel="stylesheet" />

导入式即为用 import 引入 CSS 文件,如下代码示例:

@import url("/static/css/main.css?v=1")

可以使用 style 属性获取 CSS 样式,但是 style 只能获取元素的内联样式。因此,要获取元素的完整的样式信息,必须使用 window 对象的 getComputedStyle 方法,此方法有2个参数,第一个参数为要获取计算样式的元素,第二个参数可以是null、空字符串、伪类(如:before,:after),这两个参数 都是必需的。在 IE8 以下浏览器中没有实现 getComputedStyle 方法,但可以使用 IE 中每个元素有自己的 currentStyle 属性来获取样式。获取元素样式的兼容代码如下:

<style type="text/css">
#eleid{
	font-size:14px;
}
</style>

<div id="eleid"></div>

<script>
var ele = document.getElementById("eleid");
var style = window.getComputedStyle ? 
	window.getComputedStyle(ele, "") : 
	ele.currentStyle;

var font_size = style.fontSize;  //14px;
</script>

获取<link>和<style>标签写入的样式,通过 styleSheets 获取某个样式表。这种方法只能获取声明时候的样式,跟实际运算后的有差异,如下示例:

var obj = document.styleSheets[0];
if( obj.cssRules ) {
	// 非IE [object CSSRuleList]
	rule = obj.cssRules[0];  
} else {
	// IE [object CSSRuleList]
	rule = obj.rules[0];
}

网上流传的一些获取样式的方法收集如下:

var css = function (_obj,_name){
    var result;
        //转换成小写
        _name = _name.toLowerCase();
        //获取样式值
        if(_name && typeof value === 'undefined'){
            //如果该属性存在于style[]中 (操作获取内联样式表 inline style sheets)
            if(_obj.style && _obj.style[_name]){
                result = _obj.style[_name];
            }
            //操作嵌入样式表或外部样式表 embedded style sheets and linked style sheets
            else if(_obj.currentStyle){
                 // 否则 尝试IE的currentStyle
                 _name = _name.replace(/\-([a-z])([a-z]?)/ig,function(s,a,b){
                    return a.toUpperCase()+b.toLowerCase();
                });
                result = _obj.currentStyle[_name];
            }
            //或者W3C的方法 如果存在的话 Firefox,Opera,safari
            else if(document.defaultView && document.defaultView.getComputedStyle){
                //获取Style属性的值,如果存在
                var w3cStyle = document.defaultView.getComputedStyle(_obj, null);
                result = w3cStyle.getPropertyValue(_name);
            }
            if(result.indexOf('px')!=-1) result = result.replace(/(px)/i,'');
            return result;
        }
    }
<script type="text/javascript">
function getStyle( elem, name )
{
    //如果该属性存在于style[]中,则它最近被设置过(且就是当前的)
    if (elem.style[name])
    {
        return elem.style[name];
    }
    //否则,尝试IE的方式
    else if (elem.currentStyle)
    {
        return elem.currentStyle[name];
    }
    //或者W3C的方法,如果存在的话
    else if (document.defaultView && document.defaultView.getComputedStyle)
    {
        //它使用传统的"text-Align"风格的规则书写方式,而不是"textAlign"
        name = name.replace(/([A-Z])/g,"-$1");
        name = name.toLowerCase();
        //获取style对象并取得属性的值(如果存在的话)
        var s = document.defaultView.getComputedStyle(elem,"");
        return s && s.getPropertyValue(name);
    //否则,就是在使用其它的浏览器
    }
    else
    {
        return null;
    }
}
</script>

不过对于css中的float属性,由于JavaScript将float作为保留字,所以不能将其用作属性名,因此有了替代者,在 IE中是”styleFloat”,而在FireFox、Safari、Opera和Chrome中则是”cssFloat”。所以基于兼容性的考虑可以 将样式操作改为如下形式:

//element:需要获取样式的目标元素;name:样式属性
function getStyle(element, name) {
    var computedStyle;
    try {
        computedStyle = document.defaultView.getComputedStyle(element, null);
    } catch (e) {
        computedStyle = element.currentStyle;
    }
    if (name != "float") {
        return computedStyle[name];
    } else {
        return computedStyle["cssFloat"] || computedStyle["styleFloat"];
    }
}
//element:需要设置样式的目标元素;name:样式属性;value:设置值
function setStyle(element, name, value) {
    if (name != "float") {
        element.style[name] = value;
    } else {
        element.style["cssFloat"] = value;
        element.style["styleFloat"] = value;
    }
}

阅(69)评(0)查看评论


本文转载自:http://blog.lmlphp.com/archives/59

hosser
粉丝 194
博文 78
码字总数 4614
作品 3
徐汇
私信 提问
回到基础:理解 JavaScript DOM

翻译:疯狂的技术宅 原文:medium.freecodecamp.org/an-introduc… Javascript DOM(文档对象模型)是一个允许开发人员操纵页面内容、结构和风格的接口。在本文中,我们将理解什么是 DOM 以及...

疯狂的技术宅
04/03
0
0
JavaScript零基础入门——(十)JavaScript的DOM基础

JavaScript零基础入门——(十)JavaScript的DOM基础 欢迎大家回到我们的JavaScript零基础入门,上一节课,我们了解了JavaScript中的函数,这一节课,我们来了解一下JavaScript的DOM。 第一节...

JandenMa
2018/06/23
0
0
JavaScript 是如何工作:Shadow DOM 的内部结构 + 如何编写独立的组件!

摘要: 深入JS系列17。 原文:JavaScript 是如何工作: Shadow DOM 的内部结构+如何编写独立的组件! 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 这是专门探索 JavaScript 及其所...

Fundebug
01/29
0
0
JavaScript是如何工作的:渲染引擎和优化其性能的技巧

摘要: 理解浏览器渲染。 原文:JavaScript是如何工作的:渲染引擎和优化其性能的技巧 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 这是专门探索 JavaScript 及其所构建的组件的系...

Fundebug
01/14
0
0
JavaScript是如何工作的:渲染引擎和优化其性能的技巧

当你构建 Web 应用程序时,你不只是编写单独运行的 JavaScript 代码,你编写的 JavaScript 正在与环境进行交互。了解这种环境,它的工作原理以及它的组,这些有助于你够构建更好的应用程序,...

架构师springboot
01/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

typescript 接口 函数类型 可索引类型

函数类型 可索引类型 数字索引签名 字符串索引签名 数字索引签名返回值 必须是 字符串索引签名返回值的子集 只读索引签名

lilugirl
今天
3
0
Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部