在用dom操作在对页面中的<style></style>里的样式进行操作时，发现时无效的，我觉得是因为页面DOM解析时此标签的样式内容才会被读到内存中，因此JS操作时取不到此标签的内容

　　一个标签的样式有可能是多个样式文件所定义而成了，所以浏览器在解释标签的时候会有一个计算标签最后样式的过程，想要对<style>中定义格式的标签的样式进行修改必须去操作最后浏览器计算机计算出的样式，这里用obj下的currentStyle方法，具体测试如下：

<html>

<style type="text/css">

    div{

        width: 300px;

        height: 300px;

        border-bottom: 1px solid black;

    }

    .test1{

        background: red;

    }

    .test2{

        background: green;

    }

</style>

<script type="text/javascript" >

    function getStyle(obj,attr){

        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];

        //return getComputedStyle(obj,null)[attr];

    }

    function t(){

        var m = document.getElementsByTagName('div')[];

        console.log(m);

        console.log(m.className);

        if (!m.className.indexOf('test1')) {

            m.className = 'test2';

            //alert(m.style.width);

        }else{

            m.className = 'test1';

        }

            //alert(getStyle(m,'width'));

            //return;

            getStyle(m,'width') = parseInt(getStyle(m,'width')) + ;

            m.style.height = parseInt(getStyle(m,'height')) + ;

            m.style.borderBottom = parseInt(getStyle(m,'borderBottom')) + ;

    }

</script>

<div class="test1" onclick="t();"  >

    这是一个特效

</div>

</html>

　　用到三元运算符因为IE6只有

getComputedStyle(obj,null)[attr]

　　这样就可以对样式进行操作了。

拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法的更多相关文章

  1. jquery中dom元素的attr和prop方法的理解

    一.背景 在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和prop方法到底有什么区别?各自有什么应 ...

  2. HTML5中DOM元素的querySelector/querySelectorAll的工作机制

    在HTML5中,提供了强大的DOM元素选择API querySelector/querySelectorAll,允许使用JavaScript代码来完成类似CSS选择器的DOM元素选择功能.通常情况下, ...

  3. 详解JS中DOM 元素的 attribute 和 property 属性

    一.'表亲戚':attribute和property 为什么称attribute和property为'表亲戚'呢?因为他们既有共同处,也有不同点. attribute 是 dom 元素在文档中作为 h ...

  4. HTML中DOM元素的子节点为空？！firstChild, lastChild, childeNodes[]为空

  5. IE8中伪元素动态作用样式不重绘bug记录

    前阵子对公司框架的前端优化中,使用了字体图标(iconfont)来做模块的图标集,供用户进行配置选择. 字体图标的有非常好的灵活性和复用性,可以像处理文字一样通过font-size进行大小设置.通过c ...

  6. uni-app获取dom元素到顶部的距离以及操作dom元素的一些样式

    一. 1.首先有一个元素 <view class="activity" ref="btn"></view> 2.确认指针指向 this. ...

  7. UIWebView控件中 字体大小和字体样式的修改

    修改UIWebView控件中字体的样式: NSString *htmlString = [NSString stringWithContentsOfFile:self.webPath encoding ...

  8. DOM中操作结点的属性_操作元素结点的样式

    有俩种方式操作结点的属性. 首先我们需要先获取所要操作的结点元素: var uname=document.getElementById("uname"); var gan=unam ...

  9. chrome中获取元素的样式

    以获取背景颜色为例 html部分 <div id="test">abcd</div> css部分 #test { background-color: rgb ...

随机推荐

  1. tomcat启动很慢的原因

    启动后tomcat显示的代码如下: 2014-4-3 10:50:15 org.apache.catalina.core.AprLifecycleListener init 信息: The APR b ...

  2. 第29题：推断一个序列是否是还有一个push序列的pop序列

    github:https://github.com/frank-cq/MyTest 第29题:输入两个整数序列,当中一个序列表示栈的push顺序,推断还有一个序列有没有可能是相应的pop顺序.为了简单 ...

  3. 暂停和恢复Activity Android

    暂停和恢复Activity(Pausing and Resuming an Activity) 在正常的应用程序使用,前台activity有时会被其他可视化组件遮挡,从而 造成activity的暂停. ...

  4. 调用webservice查询手机号码归属地信息

    Web Services是由企业发布的完成其特定商务需求的在线应用服务,其他公司或应用软件能够通过Internet来访问并使用这项在线服务.在这里我们使用soap协议往webservice发送信息,然 ...

  5. [AngularJS] ui-router: Abstract States

    ui-router has the powerful ability to define abstract states, or states that can't be navigated to, ...

  6. iOS开发——数据持久化&使用NSUserDefaults来进行本地数据存储

    使用NSUserDefaults来进行本地数据存储   NSUserDefaults适合存储轻量级的本地客户端数据,比如记住密码功能,要保存一个系统的用户名.密码.使用NSUserDefaults是首 ...

  7. 【模式识别】Learning To Rank之RankBoost

    RankBoost的思想比較简单,是二元Learning to rank的常规思路:通过构造目标分类器,使得pair之间的对象存在相对大小关系.通俗点说,把对象组成一对对的pair,比方一组排序r1& ...

  8. 15分钟学会git基本的操作命令

    http://hao.jobbole.com/try-git/ 假如你现在新创建了一个项目,想把它提交到github上面? 假设你创建好了一个项目,并切换到项目的根目录下面: $ git status ...

  9. Ruby on Rails Tutorial 第一章 之 Git项目管理

    1.安装和设置 (1)git的安装(略) (2)初始化设置 $ git config --global user.name "LihuaSun" $ git config --gl ...

  10. 基于ActiveMQ的统一日志服务

    概述 以ActiveMQ + Log4j + Spring的技术组合,实现基于消息队列的统一日志服务. 参考:Spring+Log4j+ActiveMQ实现远程记录日志——实战+分析 与参考文章的比较 ...