js 获取DOM的style属性

最新推荐文章于 2024-08-23 14:03:47 发布
最新推荐文章于 2024-08-23 14:03:47 发布
阅读量409 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/zoro-zero/p/4329263.html
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>计算元素样式</title>
    <style type="text/css">
        #myDiv
        {
            background-color: blue;
            width: 100px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="myDiv" style="background-color: red; border: 1px solid black">
    </div>

    <script type="text/javascript">

        var myDiv = document.getElementById("myDiv");
        alert(getStyle(myDiv,"backgroundColor"));//"red" 或 rgb(255,0,0)
        alert(getStyle(myDiv,"width")); //"100px"
        alert(getStyle(myDiv,"height")); //"200px"
        alert(getStyle(myDiv,"border"));  //在某些浏览器中是“1px solid black”
        //var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
        //alert(computedStyle.backgroundColor); //"red"
        //alert(computedStyle.width); //"100px"
        //alert(computedStyle.height); //"200px"
        //alert(computedStyle.border); //在某些浏览器中是“1px solid black”
        
        //获取DOM的style属性
        function getStyle(obj,attr)
        {
            if(obj.currentStyle)  //用于IE
            {
                return obj.currentStyle[attr];
            }
            else
            {
                // document.defaultView.getComputedStyle 该方法时DOM2中才出现的方法
                return document.defaultView.getComputedStyle(myDiv, null)[attr];
                //getComputedStyle DOM1中的方法
                //return getComputedStyle(obj,false)[attr];
            }
        }

    </script>

</body>
</html>

 

转载于:https://www.cnblogs.com/zoro-zero/p/4329263.html

angzhuo9931
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript style 样式属性操作
猿码互联
05-28 642
需要注意的是，使用 style 对象只能访问和修改内联样式属性，无法访问和修改外部样式表中定义的样式属性。如果要操作外部样式表中定义的样式属性，可以使用 getComputedStyle 方法来获取计算后的样式属性值，或者通过修改元素的 className 或 classList 属性来应用不同的样式类。要修改元素的样式属性值，可以使用 style 对象的属性赋值方式。要获取元素的样式属性值，可以使用 style 对象的属性访问方式。要动态修改样式属性，可以使用 style 对象的属性赋值方式。
js获取style属性的几种方法
weixin_38428663的博客
12-20 5601
一个超简单的小需求，用JS获得style的背景颜色，但是值一直为空，这个原因要记下来。（转） js只能修改html内部的css样式代码。 　　在JavaScript中，通过document.getElementById(id).style.XXX可以获取到XXX的值，但意外的是这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。 原来是我把样式写到了head中。但是一般不把样式写成行内样式的，所以得找到解决的办法。随继续寻找之。功夫不负有心人，终于找到了解决方法： 　　如果是ie，问题很好
js 获取DOM元素样式
challenge_impossible的博客
05-23 7947
    HTML的样式写入方法有：1、行内样式；2、内嵌样式；3、外联样式表。    行内样式：一般是用style写在dom元素上的，例如：&lt;div style='height:200px;'&gt;&lt;/div&gt;;    内嵌样式：一般是用style写在head标签内的。&lt;style type='text/css'&gt;&lt;/style&gt;;    外联样式：一般...
Javascript学习- DOM获取&属性操作
Java硬件工程师的博客
05-12 3499
DOM(Document Object Model——文档对象模型)是用来呈现以及与任意 HTML 或 XML文档交互的API白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected自定义属性：在html5中推出来了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取。
document.defaultView.getComputedStyle() 的使用
aqj1234的博客
09-23 1146
defaultView 是直到ie9才出现的Dom下新的方法。在此前parentWindow（）有相似功能。 document.defaultView（）返回当前窗口对象包含的document 例子：http://help.dottoro.com/ljvftsxk.php document.defaultView.getComputedStyle(element，[pseudoEl...
setTimeout和setInterval
马农莎的博客
08-20 1079
基本知识 setTimeout(fn,t),超时调用，超过时间t，就执行fn。 setInterval(fn,t),间歇调用，调用周期t，执行fn。 二者调用后，均返回一个数值ID，此ID是计划执行代码的唯一标识符，可以通过它来取消尚未执行的调用。 clearTimeout(id)和clearInterval(id)。取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。 重点 JS是一个单线程的解释器，因此一段时间内只能执行一段代码。为了要控制执行的代码，就有
样式种种 document.defaultView.getComputedStyle
weixin_30955617的博客
04-12 130
首先要清楚：document.getElementById(“div1″).style.display,若元素(标签内)的”style”对象并没有定义这个属性，则返回空。 其次，要返回页内样式表定义的类，那么可以使用DOM样式表对象来访问： var oCssRulers = document.styleSheets[0].cssRulers || document.styleSheets...
JS DOM获取标签/元素style样式
qq_46275230的博客
04-17 2763
JS DOM获取标签/元素style样式 文章目录JS DOM获取标签/元素style样式.stylegetComputedStyle() .style 只能获取行内样式,不能获取style标签中class的样式 <body> <div class="one" style="color:red;width:180px">小情歌</div> <script> let one = document.querySelector(".one")
JavaScript--DOM--通过DOM-style属性来设置样式，并由此获取样式
norang的博客
06-07 2097
通过style 属性获取样式有很大的局限性。 style 属性只能返回内嵌样式。换句话说，只有把CSS style 属性插入到标记里，才可以用DOM style 属性去查询那些信息： <p id="example" style="color: grey; font: 12px 'Arial',sans-serif;"> 这可不是使用样式的好办法——表现信息与结构混杂在一起了。更好的 办法是用一个外部样式表去设置样式： p#example { color: grey; font: 12p
Javascript获取标签ID改变style属性的代码
10-27
在探讨如何使用JavaScript获取标签ID并改变其style属性之前，我们需要了解几个关键的Web开发知识点，包括HTML元素的ID属性、JavaScript中的DOM操作以及CSS样式的应用方式。以下将详细阐述这些概念，并结合给定的代码...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
本文将深入探讨如何利用JavaScript获取DOM元素的位置和尺寸，并解释相关属性。 首先，我们要了解几个关键的属性： 1. `offsetWidth` 和 `offsetHeight`：这两个属性返回元素的完整外尺寸，包括内容、内边距和边框...
JavaScript变量Dom对象的所有属性
10-15
在标题和描述中提到的“JavaScript变量Dom对象的所有属性”是指通过JavaScript获取和操作DOM元素时涉及到的各种属性。以下是一些重要的DOM对象属性： 1. **id** - 这个属性对应于HTML元素中的`id`属性，它是唯一...
javascript 获取特定的 CSS属性值
10-30
下面我们将详细探讨如何使用JavaScript获取CSS文件中声明的特定样式属性值。 首先，我们来看一下提供的代码片段： ```javascript function getStyleValue(css_file_id, labname, param) { var tar; var rss; ...
遍历DOM对象内的元素属性示例代码
09-04
当需要遍历DOM对象内的元素属性时，通常是为了获取或修改元素的各种特性。这个过程可以通过JavaScript来实现，特别是当我们需要获取特定ID的元素并检查其所有属性时。以下将详细介绍如何遍历DOM对象内的元素属性，并...
原生 js 获取 dom 元素 css 样式的四种方法及对比
zwkkkk1的博客
11-21 8881
在动态操作 dom 元素时，如果我们要获取或设置一个元素的宽高、top、left 等样式时，jq 中的 .css 是常见的方法，那么在原生 js 中呢？首先想到的就是 element.style 方法，这个方法虽然可以获取也可以设置 dom 元素的样式，但也很有局限性，下面总结一下原生 js 获取 dom 元素样式的几种方法与区别~ 1. HTMLElement.style mdn 传送门 HTM...
DOMjs获取样式（包括常用事件）
ceike的博客
06-04 1263
包含隐藏展开功能 onmousedown===onclick *1. .操作符 => 获取元素样式 元素.style.样式名 获取对应的样式 a. 只能获取行内样式 2. 获取内联样式与外联样式 getComputedStyle(元素节点).样式名 返回一个style完整的样式表
JavaScript获取元素的样式
weixin_57773213的博客
04-28 1599
注意共有3个步骤，按顺序操作下去 1.通过style属性获取/修改样式元素.style.样式名=样式值 读取方式：元素.style.样式名 通过style属性设置和读取的都是内联样式 2.获取元素内联样式属性 3.需要获取样式的元素可以传递一个伪元素，一般都传null说明：该方法返回一个对象，对象中封装了当前元素对应的样式， varobj=getComputedStyle(element,null); //该方法的使用说明 获取元素显示样式： obj.属性名 或则obj["属
JS的DOM操作——style的操作
m0_59345890的博客
07-24 6420
window对象为我们提供了一个方法——getComputedStyle(当前元素节点)，返回css样式对象，里面包含了我们在css里面设置的属性的属性值。可以看到这个对象里面包含的属性有很多，并且能够看到我们设置的background-color的属性值，rgb(255,0,0)就是红色。我只能说没有办法，但是能够获取到css里面属性的值，想要操作属性还是只能用获取的元素点（·）style.xx(需要设置或修改的属性)常见操作获取的元素点（·）style.xx(需要设置或修改的属性)...
使用itextpdf5.x将网页转为PDF,并添页眉页脚页码
最新发布
qingqingzijinxin的专栏
08-23 59
itextpdf，html转pdf
js获取dom伪元素
06-02
在JavaScript中获取DOM伪元素（pseudo-element）是不可能的，因为伪元素并不是DOM中的真正元素，而是由CSS伪类生成的。伪元素的存在是为了在页面上显示一些额外的样式内容，但这些内容并不会出现在DOM结构中，因此无法以DOM元素的方式访问。 如果您需要在JavaScript中操作伪元素的样式，可以使用JavaScript操作DOM元素的样式属性。例如，您可以在CSS中定义一个伪元素的样式： ``` .my-element::before { content: "Hello"; color: red; } ``` 然后，在JavaScript中通过访问DOM元素来获取并修改该伪元素的样式，例如： ``` var myElement = document.querySelector('.my-element'); myElement.style.color = 'blue'; ``` 请注意，上面的代码只是将myElement的样式修改为蓝色，并不会影响到伪元素的样式。如果您需要通过JavaScript操作伪元素的样式，可以考虑使用类名来控制伪元素的样式，然后在JavaScript中添加或移除相应的类名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值