<!--DOCTYPE html-->

<html>

<head>

<meta charset="utf-8" />

<style>

*{ text-align:center;}

input{ margin-top:30px; padding:10px 20px;}

#div1{ width:500px; height:300px; background:red; margin:10px auto;}

</style>

</head>

<body>

<input type="button" value="style" id="btn" />

<div id="div1"></div>

<script>

//获取非行间css样式

function getStyle(obj,attr){    //获取非行间样式，obj是对象，attr是值

    if(obj.currentStyle){   //针对ie获取非行间样式

        return obj.currentStyle[attr];

    }else{

        return getComputedStyle(obj,false)[attr];   //针对非ie

    };

};

//为对象写入/获取css样式

function css(obj,attr,value){   //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式

    if(arguments.length == 2){  //arguments参数数组，当参数数组长度为2时表示获取css样式

        return getStyle(obj,attr);  //返回对象的非行间样式用上面的getStyle函数

    }else{

        if(arguments.length == 3){  //当传三个参数的时候为设置对象的某个值

            obj.style[attr] = value;

        };

    };

};

window.onload = function(){

    var oDiv = document.getElementById("div1");

    var oBtn = document.getElementById("btn");

    oBtn.onclick = function(){

        alert(getStyle(oDiv,"height"));

        css(oDiv,"background","green");

        alert(css(oDiv,"width"));

    };

};

</script>

</body>

</html>

摘自：http://www.cnblogs.com/piercalex/p/3386574.html

js获取非行间样式/写入样式（行间）的更多相关文章

  1. js获取非行间样式/定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  2. js获取非行间样式或定义样式

    <!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <sty ...

  3. JS获取非行间样式及兼容问题

    获取非行间样式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. JS获取非行间样式

    我们都知道用offset函数获取元素样式是一件很方便的事,但是offset只能获取行间样式,而无法获得非行间样式,这是它的瓶颈所在. 我们都知道js获取行间样式的方法,那么js是如何获取行距样式的呢? ...

  5. js 获取非行间样式

    1.getComputedStyle(nodeObj,false):该方法是BOM对象,第一个是要获取样式的节点对象:第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为 ...

  6. js和jquery中获取非行间样式

    样式又分为了行间样式和非行间样式.一般来说行间样式用的是比较少的,因为它能够作用的范围就只有一个元素,而非行间样式的作用范围可以是一类元素(即拥有相同德标签,或者说是有相同的类名,(当然id名不可能相 ...

  7. js兼容总结之获取非行间样式

    非行间样式案例 #div1 { width: 200px; height: 200px; background: red; } IE获取非行间样式 var oDiv = document.getEle ...

  8. JavaScript获取非行间样式/定义样式

    html节点的样式分为以下几种 (1)浏览器默认样式 (2)引用样式(引用外部css文件的样式.style标签内定义的样式) 引用外部css样式:<link rel="styleshe ...

  9. 原生js提取非行间样式

    js用style属性可以获得html标签的样式,但是不能获取非行间样式,如何获取css的非行间样式呢,在低版本ie我们可以用currentStyle,在其他浏览器我们可以用getComputedSty ...

随机推荐

  1. 设计模式のPrototypePattern（原型模式）----创建模式

    一.产生的背景 这种模式是实现了一个原型接口,该接口用于创建当前对象的克隆.当直接创建对象的代价比较大时,则采用这种模式.例如,一个对象需要在一个高代价的数据库操作之后被创建.我们可以缓存该对象,在下 ...

  2. Tomcat配置（部分知识点）

    1.<Server>元素,shutdown属性表示关闭Server的指令:port属性表示Server接收shutdown指令的端口号,设为-1可以禁掉该端口 2.Connector的主要 ...

  3. 【转】CocoaPods的使用教程

    转载自:https://www.jianshu.com/p/dfe970588f95 前言 前几天发布我的开源库<最简单方便的iOS轮播开源库:JYCarousel>到CocoaPods的 ...

  4. 【转】联普多WAN口路由器是否可以设置叠加带宽

    TP-link联普是全球领先的通讯供应厂商之一,那么你是否知道联普多WAN口路由器可以设置叠加带宽吗?下面是学习啦小编整理的一些关于联普多WAN口路由器是否可以设置叠加带宽的相关资料,供你参考. 联普 ...

  5. pytorch例子学习——NEURAL TRANSFER USING PYTORCH神经迁移

    参考:https://pytorch.org/tutorials/advanced/neural_style_tutorial.html 具体的理论就不解释了,这里主要是解释代码: ⚠️使用的是pyt ...

  6. Java虚拟机垃圾收集器

    一.判断对象存活的算法 1.引用计数(Reference Counting)算法 给对象添加一个引用计数器,每当有一个地方引用时,计数器加1.当引用失效时,计数器减1.当计数器的值为0的时候说该对象不 ...

  7. WC 2018 题解

    WC 2018 题解 一些感受.jpg 题目难度相较前些年会相对简单一点?(FAKE.jpg 平均码量符合WC风格?(甚至更多一点 出题人良心! [WC2018] 通道 一个不知道对不对的$\log ...

  8. Java使用Future设置方法超时

    1.使用线程包 java.util.concurrent.Future 2.Future代表一个异步计算的结果. 它提供了方法来检查是否计算已经完成,还是正在计算而处于等待状态,并且也提供了获取计算结 ...

  9. flask使用原生ajax、不使用表单(Form)上传文件

    〇.知识点 jquery ajax 文档告诉你可以使用默认的 application/x-www-form-urlencoded, multipart/form-data, or text/plain ...

  10. eclipes个人配置

    设置字体:https://jingyan.baidu.com/article/f96699bb9442f3894e3c1b15.html general->appearance->colo ...