JS获取CSS属性值

最新推荐文章于 2023-11-17 10:59:24 发布
最新推荐文章于 2023-11-17 10:59:24 发布
阅读量441 收藏
点赞数
分类专栏： javaScript基础 转载
[html]  view plain  copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  5.   <title> JS获取CSS属性 </title>  
  6.   <style type="text/css">  
  7.     #f{background-color:#FF0000;}  
  8.   </style>  
  9.  </head>  
  10.   
  11.  <body>  
  12.   <div id="f" style="width:200px; height:200px;"></div>  
  13.   
  14.   <script type="text/javascript">  
  15.     var o = document.getElementById('f');  
  16.     document.write(o.style.width + '<br>'); // 200px  
  17.     document.write(o.style.backgroundColor + '<br>'); // 空白  
  18.   
  19.     function getDefaultStyle(obj,attribute){  
  20.         return obj.style?obj.style[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute];     
  21.     }  
  22.     document.write(getDefaultStyle(o, 'width') + '<br>'); // 200px  
  23.     document.write(getDefaultStyle(o, 'backgroundColor')); // #FF0000  
  24.   </script>  
  25.    
  26.  </body>  
  27.   
  28. </html>  


JS獲取CSS屬性方法：

[javascript]  view plain  copy
  1. function getDefaultStyle(obj,attribute){  
  2.     return obj.currentStyle?obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute];     
  3. }  
z_Sherry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript 获取特定的 CSS属性值
10-30
在JavaScript中，获取...总之，JavaScript获取CSS属性值需要处理各种情况，包括内联样式、外部样式表以及浏览器兼容性问题。`getStyleValue`函数提供了一个基础解决方案，但更复杂的场景可能需要更高级的策略和API。
js获取元素CSS值的各种方法
zhangpu_的博客
12-04 7393
js获取元素CSS值的各种方法 1、getComputedStyle getComputedStyle 是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。 该方法用于获取计算机（浏览器）计算后的样式，即获取的是元素最终的样式。它可以访问所有样式，即既可以是行内样式，也可以是内嵌或链式样式。它对所有标准浏览器都可用，但 IE6、IE7 和 IE8 不支持该方法。 getComputedStyle(需访问样式属性的
js中怎么获取CSS属性值
findsafety的专栏
11-02 2090
obj.currentStyle只有IE支持，而getComputerStyle在FireFox中支持，这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“；如果不需要伪元素信息，第二个参数可以为null。该方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。这个方法只能获取写在style属性中的值，而无法获取定义在。
js获取某元素的样式属性,js怎么获取css中的属性
最新发布
chatgpt001的博客
11-17 403
/该方法的使用说明 获取元素显示样式： obj.属性名 或则obj["属性名"] ,如果获取的样式没有设置，则会获取到真实的值，而不是默认值。该方法不支持IE8及以下的浏览器getComputedStyle()方法与currentStyle属性都是只读的属性，不能修改属性，如果需要修改属性的值，只能使用style属性。大家好，小编来为大家解答以下问题，js获取某元素的样式属性，js怎么获取css中的属性，今天让我们一起来看看吧！（百度贴吧正文开头添加本文章CSDN的两个发表链接）文章发表网站链接URL。
css中样式类型及属性值的获取
weixin_41897680的博客
08-13 3644
css中样式类型及属性值的获取
原生js获取css属性值
ydongabc
11-03 980
获取css属性值的方法 1.obj.style： 使用方法：obj.style.left 这个方法js只能获取在html标签中的写在style属性中的值（style="…"）即行内样式，而无法获取定义在样式表里面的属性。 2.window.getComputedStyle()： 使用方法：window.getComputedStyle(obj,false).left IE中使用的是obj.cu...
js获取某元素的class里面的css属性值代码
10-26
标签“js 获取属性值”进一步明确了讨论的主题，即如何通过JavaScript获取CSS属性值。 在提供的代码示例中，定义了一个名为`getStyle`的函数，该函数接受两个参数：`obj`表示目标元素，`attr`表示要获取的CSS属性名...
用javascript获得css中的属性值的代码
10-30
JavaScript 获取 CSS 属性值的代码 在 Web 开发中，获取 CSS 属性值是一项非常重要的任务，因为它可以帮助我们更好地控制网页的样式和布局。JavaScript 提供了多种方法来获取 CSS 属性值，本文将介绍其中的一些。 ...
JS使用getComputedStyle()方法获取CSS属性值
10-26
本文将详细阐述使用getComputedStyle()方法来获取CSS属性值的知识点。 首先，我们需要了解，在使用JavaScript获取CSS样式时，会遇到两个问题。第一个问题是，element.style属性只能获取到直接写在HTML标签的style...
【JavaScript-32】使用js获取css样式内容
前端代码小白的日常博客
09-30 662
第二种，传入的是json对象，不兼容，可能有bug。//及收入判断，实际的值不等于目标的值，就继续运行。//json对象格式的遍历需要for in。变速动画中的left全部改为attr。//传入的两个参数分别是节点和属性。//考虑到两种情况需要封装一个函数。//传入的两个参数分别是节点和属性。//获取对象的样式，传入节点和属性。//.style设置的是行内样式。
js获取css属性值的方法
weixin_42123213的博客
02-14 2293
js操作获取dom元素的样式属性值 obj.style: 只能获取行内属性，而无法获取定义在<style type="text/css">里面的属性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
获取元素CSS值之getComputedStyle方法熟悉
精彩人生
05-21 1512
一、碎碎念~前言 我们都用过jQuery的CSS()方法，其底层运作就应用了getComputedStyle以及getPropertyValue方法。 对于那些只想混口饭吃的人来讲，晓得CSS()如何使用就足够了。对于希望在JS道路上越走越远的来人说，简单了解一些JS库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用，至少对创造一些创意新颖的新技术拓宽了思路。 jQuery
JS获取CSS属性值方法
坚持是世界上每个有所建树的人共有的品质！
12-16 803
JS获取CSS属性值方法有很多，我这里介绍两种 obj.style方法，这个方法只能JS只能获取写在html标签中的写在style属性中的值（style=”…”），看一下代码   XML/HTML代码http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>  http://www.w3.org/1999/xhtml“>      JS
js获取css样式
u011295864的博客
03-11 4547
情况分为两种：第一种 行内样式 第二种 其他样式 一、行内样式获取比较简单，一般通过element.style.attr即可获取样式。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/tit
如何在 JavaScript 中获取 CSS 值
web前端开发
01-15 412
来源 | https://zellwk.com/blog/css-values-in-js/有时候单独的使用CSS是不够的。您可能需要使用JavaScript控制CSS值...
JS DOM之操作CSS属性
大河之犬的博客
10-06 2432
使用style对象来设置一个CSS属性的值，其实就是在元素的style属性中添加样式，这种方式设置的是“行内样式”需要注意的是，这里的属性名使用的是“骆驼峰型”的CSS属性名。在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性。在JavaScript中，想要设置一个CSS属性的值，有两种方式可以实现。obj表示DOM对象，attr表示CSS属性名，采用的同样是“骆驼峰”型。语法：obj表示DOM对象，cssText的值是一个字符串。应该写成borderBottomWidth。
js获取css属性值
热门推荐
天空影
03-21 2万+
因为之前用惯了jq来获取和设置css属性，然后在做demo不使用jq的情况下，竟然在这一点上碰到了问题，然后就自个搜了搜为什么，在查看了很多文档和博客之后才终于搞明白了。 &lt;style&gt; .box{ width:200px; height:200px; border:1px solid red; text-align: center; } &lt;/s...
获取当前元素的css属性,获取元素的css属性值
weixin_36301419的博客
08-03 1752
```html判断浏览器是否支持一个方法pre {font-size: 16px;font-weight: 700;position: absolute;left: 10px;}window.getComputedStyle(element, null).left; // 获取element的left样式，谷歌火狐支持。window.getComputedStyle(element, null)[...
通过js获取css属性
lirunhui6的博客
10-17 5244
1、通过dom.style.属性    来获取 但是这种方法无法获取id、class里的属性 例子: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #c1
js获取css样式的属性值
05-29
可以使用JavaScript的`window.getComputedStyle()`方法来获取CSS样式的属性值。具体的代码如下： ```javascript // 获取元素 var element = document.getElementById("myElement"); // 获取样式 var style = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值