js 获取样式

最新推荐文章于 2024-04-28 18:53:16 发布
最新推荐文章于 2024-04-28 18:53:16 发布
阅读量210 收藏
点赞数
分类专栏： js 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42467563/article/details/83278840
版权
练习 同时被 3 个专栏收录
201 篇文章 8 订阅
订阅专栏
笔记
185 篇文章 0 订阅
订阅专栏
js
32 篇文章 0 订阅
订阅专栏

<html>
    <head>
        <meta charset="utf-8" />
        <title>获取样式</title>
        <style>
        
            div {
                width: 500px;
                height: 300px;
                background: red;
            }

        </style>
    </head>
    <body>
        <div></div>
    </body>
    <script>
        
        // 找到对象
        var oDiv = document.getElementsByTagName('div')[0]
        // 这种方式只能获取行内样式
        //alert(oDiv.style.width)
        // 低级浏览器
        // alert(oDiv.currentStyle['width'])
        // 高级浏览器
        // alert(getComputedStyle(oDiv, null)['width'])
        
        alert(getStyle(oDiv, 'width'))
        
        // 封装兼容获取样式的方法
        function getStyle(obj, attr)
        {
            if (typeof(obj.currentStyle) == 'undefined') {
                return getComputedStyle(obj, null)[attr]
            } else {
                return obj.currentStyle[attr]
            }
        }
        
    </script>
</html>

三尺秋水一点飞鸿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript获取元素样式
qq_63273144的博客
09-25 1469
3.window必须加，因为如果不写的话，getComputedStyle会被当作是一个变量，在ie8及以下的浏览器中，如果这个变量找不到，就会去全局中去找，找不到的话就会报错。style读取的是内联样式，即写在元素style属性上的样式，而getComputedStyle是读取的最终样式，包括。if(window.getComputedStyle){ //判断浏览器中是否有这个对象，这个window必须加。注意，在这两个方法中，读取到的样式都是只读的不能修改。这个方法是window对象的方法，
js获取css样式
qq_51855957的博客
08-02 1995
而当我们用js元素.style只能设置行内样式，要获取css样式可以使用getComputedStyle。3.外链式，在文档head标签内，用link标签引入外部css文件，普通权重，书写方便经常使用。1.行内式，在元素标签中由style属性书写，权重高，书写不方便。2.内嵌式，在文档head标签内，用style属性书写，普通权重，经常使用。...
JavaScript零基础入门 9：JavaScript读取元素的样式_javascript中获取元素的样式信息
最新发布
2401_84447233的博客
04-28 239
#box1{//点击按钮以后读取box1的样式// 定义一个函数，用来获取指定元素的当前的样式alert(ret);/\*\* 参数：\* obj 要获取样式的元素\* name 要获取的样式名\*///谷歌/edge浏览器，具有getComputedStyle()方法}else{//IE没有getComputedStyle()方法，下面为IE8的方式
js获取某元素的样式属性,js怎么获取css中的属性
chatgpt001的博客
11-17 398
/该方法的使用说明 获取元素显示样式： obj.属性名 或则obj["属性名"] ,如果获取的样式没有设置，则会获取到真实的值，而不是默认值。该方法不支持IE8及以下的浏览器getComputedStyle()方法与currentStyle属性都是只读的属性，不能修改属性，如果需要修改属性的值，只能使用style属性。大家好，小编来为大家解答以下问题，js获取某元素的样式属性，js怎么获取css中的属性，今天让我们一起来看看吧！（百度贴吧正文开头添加本文章CSDN的两个发表链接）文章发表网站链接URL。
javascript获取元素的计算样式
10-16
在做html页面开发时，经常会使用到js（javascript）来处理客户端的逻辑，下面我们就来看一下，如何使用js来获取页面上的元素
js获取内联样式的方法
10-24
主要介绍了js获取内联样式的方法,针对标准浏览器与IE浏览器进行不同的判断与获取,具有一定参考借鉴价值,需要的朋友可以参考下
js获取样式表里面的内容
12-08
在JavaScript（JS）中获取CSS样式表的内容是前端开发中常见的需求，这主要涉及到DOM（文档对象模型）操作和CSSOM（CSS对象模型）的应用。本文将深入探讨如何利用JavaScript来获取CSS样式表中的信息，特别是针对`...
JavaScript中获取样式的原生方法小结
10-25
本文将详细介绍五种JavaScript获取样式的原生方法，并提供实例帮助理解。 1. `element.style`： 这个方法主要用于获取元素直接在HTML标签内通过`style`属性设置的样式值，例如`;"></div>`。它无法获取到外部CSS...
原生JS实现获取及修改CSS样式的方法
10-18
因此，为了保证跨浏览器兼容，我们可以编写一个封装函数来统一获取样式： ```javascript function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return ...
js获取样式表的样式
qq_46580571的博客
10-13 303
我们在用元素.style.样式名操作的是内联样式，而我们无法读取到样式表的样式，所以我们需要用到其他的方法。 1.getComputedStyle() 2.currentStyle() 这两种方法方法用于获取指定元素的 CSS 样式，而currentStyle()适用于IE浏览器。 **getComputedStyle()**适用于大部分浏览器，且里面的有两个参数，该方法属于window的可以直接使用，并且会返回一个对象var obj = getComputedStyle(元素，null); 调用宽度的
JS获取样式
weixin_30882895的博客
09-06 72
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ...
JS、CSS --- 获取元素样式的方法，获取元素的坐标，windows坐标
秋天，黄叶坠地，凉风有信。
02-20 1496
JS --- 获取元素样式的方法，获取可见样式，并且获取鼠标滚动的高度，可视高度， 用scrollHeight（鼠标滚动条的高度） - scrollTop（鼠标滚动距离的高度） == clientHeight（当前视口高度）表示鼠标已经滚动到底了来实现一个小案例
js获取css值的方法：style、getComputedStyle和currentStyle
lzding的博客
06-01 1万+
JS 获取 html元素的样式有三种方式：style、getComputedStyle 和 currentStyle等。区别在于： （1）style 只能获取行间样式，但能设置样式。 （2）getComputedStyle 和 currentStyle 能够获取 行间样式/非行间样式/浏览器默认样式，但存在浏览器兼容问题，且不能设置样式。 一、element.style 获取行间样式，以及设
JS设置获取元素CSS样式的方法
热门推荐
吴小迪的博客
06-23 3万+
获取元素CSS样式的方法： element.style - - 获取行内（内联）样式表对象 window.getComputedStyle(element) - - 获取经过计算最后起作用的样式规则对象 - - 该方法在IE9之前的浏览器中有兼容问题 IE9之前浏览器使用 element.currentStyle 属性来获取经过计算起作用的样式规则 PS：element 表示待求解样式的 DO...
js中怎么获取CSS属性值
weixin_33911824的博客
12-06 5881
obj.style: 这个方法只能获取写在style属性中的值，而无法获取定义在 <style type='text/css'>里面的属性 <style type=”text/css”> .ss{color:#cdcdcd;} </style> <div id=”css88″ class=”ss” style=”width:200px; heig...
使用JavaScript获取元素样式值
rqz__的博客
07-29 155
js获取元素样式值 // 通过getComputedStyle获取DOM元素上所有样式。 <button>click</button> <script> const but = document.querySelector('button') const butStyle = getComputedStyle(but) console.log(butStyle); // 输出but上所有的样式。 console.log(butSty
js 获取样式出去padding margin border的高度
03-31
其中，`clientHeight` 表示元素的高度（包括padding，但不包括border和margin），`window.getComputedStyle(element)` 获取元素的计算样式，`parseFloat()` 方法将样式的值转换为浮点数，然后通过减去padding、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值