获取dom节点

如何使用 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;
    }
}
时间: 2024-10-10 00:35:06

获取dom节点的相关文章

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

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 属性. 某些情况下,我们不能使用 JQ

jQuery 获取DOM节点的两种方式

jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 2.使用函数get()访问,例如: var dom = $(dom).get(0); get()函数中的参数为索引号. 3.示例 var div = document.createElement("DIV"); div.innerText = "TEST IS OK!"; document.body.a

原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position().left: 原生写的话就是用获取节点,do while循环就可以了.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

ionic2 获取dom节点

ionic2页面上面获取dom节点,可以直接用原生的方法,document.querySelector()等, 但是不建议这样使用,建议使用官方的.就是要在获取的节点上加上#name的属性(相当于getElementById), 在ts文件上面引入viewchild装饰器 然后在构造器里面声明使用@viewchild('name') name 就可以了,一般使用都是this.name这样子. 原文地址:https://www.cnblogs.com/huzhuhua/p/10236172.htm

React 事件对象、键盘事件、表单事件、ref获取dom节点、react实现类似Vue双向数据绑定

1.案例实现代码 import React, { Component } from 'react'; /** * 事件对象.键盘事件.表单事件.ref获取dom节点.react实现类似Vue双向数据绑定 * 事件对象: 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件有关的信息 * 表单事件: 获取表单的值 * 1.监听表单的改变事件 ---onChange * 2.在改变的事件里面获取表单输入的值 ---event * 3.把表单输入的值赋值给username

vue怎么不通过dom操作获取dom节点

今天写一个公众号的项目,写了一个vue的搜索组件,点击搜索框时,背景出现一个遮罩,代码结构如下: template:`<div class="searchBar-div"> <input v-model="keyWord" @keyup.enter='startSearch()' class="searchBar-input" type="search" placeholder="搜索"

通过ref来获取DOM节点

1 <template> 2 <div> 3 <div ref="hello"> 4 hello world 5 </div> 6 <button @click="handleClick">我是按钮</button> 7 </div> 8 </template> 9 10 <script> 11 export default { 12 name: 'Home'

jsp获取dom节点以及节点的文本值和参数属性值

1.获取节点的方式: 1)通过顶层获取节点: document.getElementById("");通过id获取节点的属性值.备注:如果包含多个相同ID的节点,只返回第一个节点 document.getElementsByName("");返回一组相同name元素的数组.然后通过判断属性来确定是否为需要的节点,以radio,CheckBox为例,通过判断check的属性是否为TRUE: document.getElementsByTagName();通过标签名来获

JavaScript中的获取DOM节点

主要有:document.getElementById,getElementsByClassName,getElementsByTagName,getElementsByName 函数名写法:getElementsByClassName.getElementsByTagName 是elements!!!带s!!!getElementById 才没有s~~ 返回值: getElementById返回的是一个element元素,若取不到返回null: getElementsByClassName返回