拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法

  在用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‘)[0];

        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‘)) + 5;
            m.style.height = parseInt(getStyle(m,‘height‘)) + 5;
            m.style.borderBottom = parseInt(getStyle(m,‘borderBottom‘)) + 1;

    }

</script>
<div class="test1" onclick="t();"  >
    这是一个特效
</div>
</html>

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

getComputedStyle(obj,null)[attr]

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

时间: 2024-10-06 01:19:28

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

网页中DOM元素转换成图片

利用html2canvas.js将网页中dom元素转换成图片,html2canvas.js的链接是:http://html2canvas.hertzen.com/ 实现效果demo的代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页转图片</title> <style> #img

查询网页中DOM元素的总数量

在fireFox浏览器中的FireBug的控制台输入 document.getElementsByTagName('*').length 即可

javascript:cssText 修改元素的style样式 - &nbsp; &nbsp; - innerHTML 修改元素的内容!

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div { width:100px; height:100px; border:1px solid #333; } </sty

关于dom元素的nextSibling的属性使用注意点

博主在进行某次前端开发过程中,使用dom元素的nextSibling属性,用于获取下一个同辈元素,但是却得到非预期结果.代码片段如下 <!DOCTYPE html> <html> <body> <ul> <li id="Coffee">Coffee</li> <li id="Tea">Tea</li> </ul> <button onclick=&quo

JS选取DOM元素的方法

摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法比jquery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表现最好,其次是Firefox) 选取文档元素的方法: 1.通过ID选取元素(getElementById)   1)使用方法:document.getElem

动态修改 dom 元素的伪类样式

最近写代码,需要修改伪类的 content 属性,不想定义两个样式进行切换,而是直接通过 js 进行修改. html 中的伪类(如 a:hover / a:link / class::before / clss::after 等),因为不是 dom 元素,所以 不能直接通过 js 修改其属性,虽然可以通过 切换 dom 元素的 css 样式名进行修改,但是这样就比较复杂了. 参考了一个 帖子 然后进行了一些修改,大概思路如下: 这里使用  windows 8 的工程,js 代码直接写在 defa

数组及其在内存中的分配

1.一维数组 ● 数组概念:数组是储存同一种数据类型多个元素的集合.也可以看成是一个容器.它既可以存储基本数据类型,也可以存储引用数据类型. ● 定义格式1: 数据类型[] 数组名:       格式2: 数据类型 数组名[]; ● 数组的初始化.动态初始化 数组的初始化:数组必须先初始化,然后才能使用,就是为数组中的数组元素分配内存空间,并为每个数组元素赋值 初始化分类: (1)动态初始化:只指定长度,由系统给出初始化值: (2)静态初始化:给出初始化值,由系统决定长度. 注意:这两种方式只能

SQL Server 内存中OLTP内部机制概述(一)

----------------------------我是分割线------------------------------- 本文翻译自微软白皮书<SQL Server In-Memory OLTP Internals Overview>:http://technet.microsoft.com/en-us/library/dn720242.aspx ----------------------------我是分割线------------------------------- SQL S

javascript中的链表结构—从链表中删除元素

1.概念 上一个博文我们讲到链表,其中有一个方法remove()是暂时注释的,这个方法有点复杂,需要添加一个Previous()方法找到要删除的元素的前一个节点,这一个博文我们来分析一下这个remove()方法. 从链表中删除节点的时候,需要先找到这个待删除节点的前面的节点.找到这个节点之后修改它的next属性,使其指向待删除节点的下一个节点,这样就把待删除节点给删除了,是不是很简单呢?但是问题来了,我们是不是要找到待删除节点的前面一个节点呢?这样就需要添加一个findPrevious()方法来