JS获取CSS样式的问题

最新推荐文章于 2022-09-25 10:37:55 发布
最新推荐文章于 2022-09-25 10:37:55 发布
阅读量987 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenjianjun95/article/details/50859038
版权
当使用JS获取CSS样式时，只能获取HTML标签内的样式，而非外部CSS或中的样式。对于IE内核，可以使用`object.currentStyle`；Firefox则需用`document.defaultView.getComputedStyle(obj,null)`。解决方法是结合两者，根据浏览器类型选择合适的方法。文中提供了一个简化版的函数`getStyle(obj)`，能更简洁地获取元素样式。" 105234432,9371273,Python文本情感分析：电影评论的词袋模型与TF-IDF,"['机器学习', 'python', '数据分析']
摘要由CSDN通过智能技术生成

今晚做一个小小的JS效果时，突然发现用JS获取CSS样式时只能获取到内部的，也就是写在HTML标签里的style，如果把样式写在<head></head>或者是CSS文件里面就获取不了，用alert（)调试一下，就只弹出一个，什么也没有。于是就去网上找了下资料，果然，让我找到解决的办法。解决办法如下：

如果浏览器是IE内核的话用object.currentStyle就行了，即

对象.currentStyle.属性名

如果是FireFox的话就用document.defaultView.getComputedStyle(obj,null)这个比较复杂一点，在下也不是很懂.

当然我们一般都是将这两种结合起来，然后判断是什么浏览器来决定用哪个

网上一些代码是这样的

最低0.47元/天 解锁文章
风吹_淡淡凉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS获取CSS样式（style/getComputedStyle/currentStyle）
11-23
CSS的样式分为三类： 内嵌样式：是写在Tag里面的，内嵌样式只对所有的Tag有效。 内部样式：是写在HTML的里面的，内部样式只对所在的网页有效。 外部样式表：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这 些样式(Styles)的网页里引用这个CSS文件。 getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式对象([object CSSStyleDeclaration]) currentStyle是IE浏览器的一个属性，返回的是CSS样式对象 el
js获取css样式
qq_51855957的博客
08-02 2002
而当我们用js元素.style只能设置行内样式，要获取css样式可以使用getComputedStyle。3.外链式，在文档head标签内，用link标签引入外部css文件，普通权重，书写方便经常使用。1.行内式，在元素标签中由style属性书写，权重高，书写不方便。2.内嵌式，在文档head标签内，用style属性书写，普通权重，经常使用。...
js 获取css 样式表属性
天蝎座
06-26 1412
今天看到这样两个属性 currentStyle defaultView，这两个属性从字面上看，是获取css 属性的，而我之前获取css属性用的则是dom.element.style.height 类似这样的写法，今天看到上面提到的两个属性有好奇，与在网上查了一下，这个两用法是区别的： -->dom.element.style.height 对于样式写在或者.css文件里，是无效的 -->与是c
JS获取样式
n9nzjx57bf的博客
05-09 641
我们已经知道了JavaScript如果获取一个元素的内部样式，你可以这样做： var oBox = document.getElementById('box'); console.log(oBox.style.width); console.log(oBox.style.height); console.log(oBox.style.backgrou
解析js如何获取css样式
10-20
JavaScript获取CSS样式是Web开发中的常见任务，尤其在动态改变元素外观或进行复杂交互时尤为重要。本文将深入探讨如何使用JavaScript获取元素的内联样式、内部样式表样式以及外部样式表样式。 首先，我们来看如何...
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
12-10
众所周知，CSS样式有三种类型：行内样式、内部样式和外部样式，JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法 。 一、行内样式获取相对简单，通过element.style.attr（元素.style.属性...
原生JS实现获取及修改CSS样式的方法
10-18
本文将详细讲解如何使用原生JS来获取和修改CSS样式，包括行内样式、内部样式以及外部样式，同时也会涉及浏览器兼容性问题。 一、行内样式获取 行内样式是直接在HTML元素的`style`属性中定义的样式。例如： ```html ...
js 获取样式
qq_42467563的博客
10-22 211
&lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8" /&gt;         &lt;title&gt;获取样式&lt;/title&gt;         &lt;style&gt;                      div {                 width: 500px;           
js获取css的各种样式并且设置他们的方法
01-19
js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要： 下面这个代码主要是设置为了兼容IE这孙子; function getStyle(element, attr) { 　　if (element.currentStyle) { 　　　　return element.currentStyle[attr];//傻逼IE的获取元素的方法 　　} else { 　　　　return getComputedStyle(element, null)[attr]; 　　} } 平
js获取样式表里面的内容
12-08
利用js获取到css里面的内容
JavaScript获取元素样式
Sore4的博客
04-21 5002
JavaScript获取元素样式
js 获取元素css样式
qq_34870529的博客
01-07 315
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获.
javascript获取元素样式
qq_63273144的博客
09-25 1479
3.window必须加，因为如果不写的话，getComputedStyle会被当作是一个变量，在ie8及以下的浏览器中，如果这个变量找不到，就会去全局中去找，找不到的话就会报错。style读取的是内联样式，即写在元素style属性上的样式，而getComputedStyle是读取的最终样式，包括。if(window.getComputedStyle){ //判断浏览器中是否有这个对象，这个window必须加。注意，在这两个方法中，读取到的样式都是只读的不能修改。这个方法是window对象的方法，
JS获取CSS样式的三种方式
热门推荐
iKun
11-02 1万+
JS获取CSS样式的三种方式 第一种获取非行间的样式: 使用getComputedStyle与currentStyle属性获取样式 这里第一个参数值获取那个选择器的属性，第二个参数代表是否需要获取伪类元素 :before,:after等 if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return obj.g...
js中获取css样式 getComputedStyle
qq_39532595的博客
12-27 778
在js中直接用点方法是没有办法获取到外链式、内嵌式的样式表。只能够获取到行内样式，然后就诞生了这篇博客。 一、js中获取行内样式 在js中直接获取css的样式，只能获取到行内样式表。具有两种方法，代码如下： &amp;lt;div id=&quot;myDiv&quot; style = &quot;width:100px; height:100px; background-color:red; border:1px s...
js如何获取css样式
能能的代码日常
11-21 996
今天写代码时遇到一个小问题，以前没怎么注意过的。外联样式表里的css样式不能用xx.style.css获取到，但是可以更改。 1. 获取内联样式在这种情况下，获取和设置样式只靠style属性就可以，因为element.style属性返回的是类似数组的一组样式属性及对应值，因此访问具体样式的时候可以采取两种方式即“ele.style.属性名称”和“ele.style[‘属性名称’]”。 但是，要
js获取css样式的属性值
最新发布
05-29
可以使用JavaScript的`window.getComputedStyle()`方法来获取CSS样式的属性值。具体的代码如下： ```javascript // 获取元素 var element = document.getElementById("myElement"); // 获取样式 var style = window.getComputedStyle(element); // 获取属性值 var value = style.getPropertyValue("color"); ``` 其中，`getPropertyValue()`方法用于获取指定属性的值，需要传入属性名作为参数。在上述代码中，我以获取`color`属性的值为例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值