javascript获取网页元素的最终样式

最新推荐文章于 2024-05-08 14:55:24 发布
最新推荐文章于 2024-05-08 14:55:24 发布
阅读量374 收藏
点赞数
分类专栏： 脚本语言 文章标签： JavaScript IE ASP CSS 浏览器 ViewUI
      今天遇到个问题，用js获取网页元素的样式，如果直接用 document.getElementById("idname").style 获取的话，只能获取该元素的专有样式，即在该元素上直接用style=“”指定的样式，而无法获取由class设置的和从上级元素继承来的样式，也就是浏览器生成dom后最终的样式，所以很头痛。网上搜索了一下，找到一个办法。
     
 
  1. <html>  
  2. 　　<head>  
  3. 　　<style type="text/css">  
  4. 　　div.special{  
  5. 　　 background-color:red;  
  6. 　　 height:50px;  
  7. 　　 width:50px;  
  8. 　　 margin:10px;  
  9. 　　}  
  10. 　　</style>  
  11. 　　<script language="JavaScript">  
  12. 　　function getBackgroundColor()  
  13. 　　{  
  14. 　　 var oDiv=document.getElementById("div1");  
  15. 　　 alert(oDiv.currentStyle.backgroundColor||document.defaultView.getComputedStyle(oDiv,null).backgroundColor);  
  16. 　　}  
  17. 　　</script>  
  18. 　　</head>  
  19. 　　<body>  
  20. 　　<div id="div1" class="special"></div>  
  21. 　　<input type="button" value="Get Background Color" onclick="getBackgroundColor()">  
  22.     </input>  
  23. 　　</body>  
  24. 　　</html>  

      注意：oDiv.currentStyle.backgroundColor是IE使用的方法，document.defaultView.getComputedStyle(oDiv,null).backgroundColor是DOM使用的方法。

       内容来源：http://blog.tianya.cn/blogger/post_show.asp?BlogID=666817&PostID=7224874&idWriter=0&Key=0
jolestar
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS美化网页元素（字体样式及排版、超链接伪类、列表样式、背景样式、渐变）
Learn to value time
12-29 877
美化网页元素 为什么要美化网页？ 有效的传递页面信息 美化网页，页面漂亮，才能吸引用户 凸显页面的主题 提高用户的体验 span标签：重点要突出的字，使用span套起来 <!--设置样式--> …… <style> #title{ font-size:30px; } </style> …… <!--使用span标签重点突出Java--> …… 欢迎学习<span id="title">Java</s
浅谈javascript获取元素transform参数
10-23
2. `window.getComputedStyle(element)`能获取元素最终的渲染规则，包括由CSS和内联样式共同作用的结果。 3. jQuery的`$.css()`方法获取的是元素的最终渲染样式，设置时则是通过内联样式完成。 4. 当需要频繁操作`...
获取元素的最终样式
weixin_34375251的博客
02-25 149
看到这样一道微信面试题：用JS代码求出页面上一个元素的最终的background-color，不考虑IE浏览器，不考虑元素float情况。（2017.3.1补充：赛赛同学提醒了我，还要考虑background这个复合属性，情况变得异常复杂了，以下代码是之前的，没有考虑。)由于element.style.cssText只能访问到元素内联样式即标签style属性，...
JavaScript零基础入门 9：JavaScript读取元素的样式_javascript中获取元素的样式信息
最新发布
fksdskjfzxklzk的博客
05-08 611
我是云韵
原生js获取元素最终样式
ricardo_rie的博客
03-13 1249
张鑫旭的个人博客_web前端技术文章_获取元素CSS值之getComputedStyle方法熟悉
Window.getComputedStyle()方法获取元素最终样式
陈坚泓的博客
11-07 4967
Window.getComputedStyle方法获取元素最终样式window.getComputedStyle()用法返回值跟style的异同兼容性参考 window.getComputedStyle() 用法 let style = window.getComputedStyle(element, [pseudoElt]) // 例如 let my_div = document.getElem......
原生javascript获取元素样式属性值的方法
10-28
学习JavaScript获取元素样式属性值的方法，可以参考一些优秀的书籍，例如提到的“精通JavaScript”一书，其中对获取元素位置和样式属性值有深入的解释。了解这些知识，对于编写高性能、兼容性的前端代码至关重要。...
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
10-24
需要注意的是，`window.getComputedStyle`方法返回的是计算后的样式，即考虑了继承、浏览器默认样式、用户样式等所有因素后的最终样式。此外，由于伪元素不在DOM中，它们的样式不能通过`element.style`属性访问，...
javascript获取作用在元素上面的样式属性代码
12-08
本文将详细解释如何使用JavaScript获取元素上的样式属性，重点分析给定的代码示例。 首先，我们来看一下标题和描述中提到的关键知识点：`getComputedStyle()`方法。这是一个非常重要的JavaScript API，用于获取元素...
JavaScript中获取样式的原生方法小结
10-25
这是W3C推荐的标准方法，可以获取元素所有最终生效的CSS属性值，包括继承的、计算后的以及通过伪类应用的样式。这个方法在大部分现代浏览器中都得到支持，但在IE6-8中不支持。例如： ```javascript var ele = ...
仿站工具（输入网址抓取目标网站样式）
03-22
输入网址抓取目标网站样式，在开发过程中想要引用或者模仿其余网站的一些样式，可以使用该工具，使用方法，解压文件后打开仿站小工具.exe，输入网址和需要保存的文件的相对路径即可，部分网站不支持
javascript获取元素样式
sdgdwangyan的专栏
10-20 335
在页面上有个table,想实现的功能是： 首次点击某个单元格时变色，同时输出“预约成功！” 第二次点击该单元格时便会原来的颜色，同时输出“解除预约！” 遇到了三个问题 1.获取点击对象： 在每个单元格上添加事件： var x=event.target; //引发事件的对象 var obj=document.getElementById(x.id); 但是这样做并不好，因为要在每
javascript 获取元素的最终显示样式
qq_42815050的博客
07-03 364
//当页面加载完成之后，触发onload window.onload = function(){ var oWrap = document.getElementById("wrap"); } //.style的方式，只能设置或者获取行内样式的值 getComputedStyle //获取某个元素节点的显示样式对象 var s = getComputedStyle (oWrap); console.log(s.width); console.log(s.backgroundColor);//得
JS 获取最终生成的样式
qq_28223305的博客
11-16 404
function getStyle(obj,name){  return (obj.currentStyle||getComputedStyle(obj,false))[name] } currentStyle IE getComputedStyle 火狐 谷歌
JavaScript 获取元素的当前显示的样式
路虽远，行则必至！
06-29 1452
一、 在 IE 浏览器中获取元素的当前显示的样式 语法：元素 . currentStyle . 样式名 它可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取它的默认值 注意：这个方法，只兼容于 IE 浏览器，其他浏览器均不支持，如下图： 读取元素样式，返回的值带有单位，例如：px 若我们要使用读取元素样式返回的值，需取出其中的数字，即：parseInt() 若不设置 w...
JS基础-获取元素的样式
linqunbin的博客
06-01 2439
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
javascript --获取css样式最终的属性值
hsany330的专栏
08-31 872
在dom元素中使用css属性，可能会遇到两个问题，一是javascript要求在设置任何几何属性是必须明确尺寸单位，同时，任何几何属性都回返回表示元素样式的字符串数值（比如1000px而非100） 二是如果一个元素是100像素高，想获取他的当前高度，如果希望从样式属性中就能得到100px这样的精确结果，但是有时候并不能如愿。这是因为在使用样式表或者行内css所预设的样式信息并不能精确可靠的反
获取元素样式
玲曦的博客
09-04 755
1、ele.style ele.style只能获取写在元素标签中的style属性里的样式值，无法获取到定义在和通过加载进来的样式属性 var test = document.getElementById("test"); //获取节点的color test.style.color; 2、getComputedStyle() getComputedStyle是一个可以获取当前元素所有最终使用...
多个div盒子可任意位置拖拽，并获取他们最终的位置
06-09
好的，以下是一个实现多个div盒子任意位置拖拽，并获取它们最终位置的示例代码： HTML部分： ```html <div id="container"> <div class="draggable" id="myDiv1">可拖动的div1</div> <div class="draggable" id="myDiv2">可拖动的div2</div> <div class="draggable" id="myDiv3">可拖动的div3</div> </div> ``` CSS部分： ```css #container { position: relative; width: 500px; height: 500px; border: 1px solid black; } .draggable { position: absolute; cursor: move; } ``` JavaScript部分： ```javascript var container = document.getElementById("container"); var draggables = document.querySelectorAll(".draggable"); var activeDraggable = null; var initialX, initialY, currentX, currentY, xOffset = 0, yOffset = 0; draggables.forEach(function(draggable) { draggable.addEventListener("mousedown", dragStart); draggable.addEventListener("mouseup", dragEnd); draggable.addEventListener("mousemove", drag); }); function dragStart(event) { activeDraggable = this; initialX = event.clientX - xOffset; initialY = event.clientY - yOffset; } function dragEnd(event) { initialX = currentX; initialY = currentY; activeDraggable = null; console.log("最终位置：(" + currentX + ", " + currentY + ")"); } function drag(event) { if (activeDraggable) { event.preventDefault(); currentX = event.clientX - initialX; currentY = event.clientY - initialY; xOffset = currentX; yOffset = currentY; setTranslate(currentX, currentY, activeDraggable); } } function setTranslate(xPos, yPos, el) { el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)"; } ``` 这个代码会使得拥有class为draggable的所有div元素可以被拖动，并且当拖动结束时会打印出它们最终的位置。可以通过修改CSS样式来控制盒子容器的样式和位置。在这个示例代码中，容器的宽度和高度都是500px，边框为1px的黑色实线。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值