在用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. C#小常识集锦(一)--《更锋利的CSharp代码》读书笔记

    ❀.采用类似匈牙利命名法为控件命令,对于其他变量申明则不需要了 e.g. Button btnAdd; e.g. TextBox txtUsername; e.g. ListBox lstFileNa ...

  2. JUnit---Java单元测试必备工具

      在我们每天业务代码都写不完,为什么还要写测试代码呢,项目完成之后我再测不行吗? 看起来像是增加了代码量,但是它恰恰帮你减少了后期测试排错的时间,每个team,每个人都是有Bug指标的,首先,每次你 ...

  3. Dijkstra最短路径算法[贪心]

    Dijkstra算法的标记和结构与prim算法的用法十分相似.它们两者都会从余下顶点的优先队列中选择下一个顶点来构造一颗扩展树.但千万不要把它们混淆了.它们解决的是不同的问题,因此,所操作的优先级也是 ...

  4. UNIX基础知识之信号

    本篇博文内容摘自<UNIX环境高级编程>(第二版),仅作个人学习记录所用.关于本书可参考:http://www.apuebook.com/. 信号(signal)是通知进程已发生某种情况的 ...

  5. 使用 T4 文本模板生成设计时代码

      使用设计时 T4 文本模板,您可以在 Visual Studio 项目中生成程序代码和其他文件. 通常,您编写一些模板,以便它们根据来自模型的数据来改变所生成的代码. 模型是包含有关应用程序要求的 ...

  6. 前端js插件

    jquery jquery官方 版本:v 2.1.0v 1.11.0 yquery 暂停更新 版本: v 1.6v 1.5 v 1.4v 1.3 v 1.2v 1.1 v 1.0 jQuery 原型插 ...

  7. 小白日记3：kali渗透测试之被动信息收集（二）-dig、whios、dnsenum、fierce

    一.DIG linux下查询域名解析有两种选择,nslookup或者dig.Dig(Domain Information Groper)是一个在类Unix命令行模式下查询DNS包括NS记录,A记录,M ...

  8. 防火墙导致FTP传输文件为0

    在使用 ftpClient 传输文件到FTPserver时,在别的机器上可以正常使用,但是到自己的机器有就始终是0文件,发现是Mcafee 防火墙导致的,只要让防火墙放行即可. Mcafee防火墙的放 ...

  9. proxy代理类

    package cn.hncu.proxy.rent; import java.lang.reflect.InvocationHandler;import java.lang.reflect.Meth ...

  10. swift基本数据类型的使用

    // // ViewController.swift // 基本数据类型 // // Created by 叶炯 on 16/9/8. // Copyright © 2016年 叶炯. All rig ...