element.style和window.getComputedStyle的一些注意点

最新推荐文章于 2021-12-25 10:24:06 发布
最新推荐文章于 2021-12-25 10:24:06 发布
阅读量418 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhy1998hhy/article/details/110204749
版权

在这里插入图片描述

element.style虽然可以设置元素的样式，但是只能获取内联样式的信息,因为没有给div设置内联样式，所以div.style.left获取不到值,左边的left也就没有值了，所以div就开始移动了一下。
window.getComputedStyle可以设置元素的样式，也可以获取元素的样式。
这里可以用parseInt(window.getComputedStyle(div).left)来改变div.left的值
也可以设置一个值，来改变left在这里插入图片描述

吃不胖的橘猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习笔记style，currentStyle，getComputedStyle的用法与区别
09-02
在前端开发中，理解和掌握`style`、`currentStyle`以及`getComputedStyle`的用法与区别至关重要。这些属性和方法允许我们在JavaScript中动态获取和修改元素的样式，从而实现丰富的用户界面交互。 首先，我们要了解...
JS获取CSS样式（style/getComputedStyle/currentStyle）
11-23
在JavaScript中，获取CSS样式的方法主要有两种：`element.style` 和 `window.getComputedStyle()` 或 `element.currentStyle`（仅IE浏览器）。这些方法可以帮助开发者在运行时动态地读取或修改页面元素的样式。 ...
getComputedStyle方法获取元素CSS值
weixin_33850015的博客
08-11 423
javascript的style属性只能获取内联样式，对于外部样式和嵌入式样式需要用currentStyle属性。但是，currentStyle在FIrefox和Chrome下不支持，需要用getComputedStyle 1、getComputedStyle是？ getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回...
Window.getComputedStyle()方法获取元素最终样式
陈坚泓的博客
11-07 4976
Window.getComputedStyle方法获取元素最终样式window.getComputedStyle()用法返回值跟style的异同兼容性参考 window.getComputedStyle() 用法 let style = window.getComputedStyle(element, [pseudoElt]) // 例如 let my_div = document.getElem......
window.getComputedStyle()方法的使用及其扩展
weixin_30294021的博客
04-28 616
1.window.getComputedStyle()方法返回值 是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。 语法：var style = window.getComputedStyle("元素", "伪类"); //第二个参数选填 如果不查询伪类的话可以不填或填nul...
JavaScript获取样式（/获取值不对？）
weixin_45627194的博客
01-07 563
问题：用document.getElementById(‘element').style.xx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。
Vue中获取元素的宽高
ilovexiaoming1的博客
12-25 2万+
一、获取元素 1、this.$refs 2、document.querySelector() document.getElementById() document.getElementByTagName()等等 确保获取到的元素不是undefined或null vue中，在mounted()生命周期函数中才能获取dom元素，建议在修改样式时加个定时器，或者将代码放入 $nextTick()中执行。 二、获取元素的宽高 1、如果是内嵌样式style="width:100px,height:10..
getComputedStyle_tyle.rar_getComputedSty_getcomputedstyle
09-22
3. 获得元素的宽度和高度：`window.getComputedStyle(element).width`和`window.getComputedStyle(element).height` 压缩包中的“getComputedStyle_tyle.pdf”很可能提供了更多关于这个主题的详细示例和解释，可能...
一些常用且实用的原生JavaScript函数.docx
07-09
realStyle = window.getComputedStyle(elem, null)[stylename]; } return realStyle; } ``` 10. **事件绑定兼容性**： 使用`addEventSamp`函数可以兼容不同的事件绑定机制，包括IE和非IE浏览器： ```...
javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍)
12-10
需要注意的是，`currentStyle`和`getComputedStyle`都是只读的，不能用于设置样式。在编写兼容多浏览器的JavaScript代码时，需要根据浏览器类型选择合适的样式获取方法。 总结来说，`style`属性主要用于处理内联...
getComputedStyle(and currentStyle)
07-05 115
1.getComputedStyle 　　1.1　用法： currentStyle获取计算后的样式，也叫当前样式、最终样式。优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。 currentStyle 在ie、oper...
getComputedStyle与currentStyle获取样式(style/class)
orichisonic的专栏
12-30 469
大家都知道，用document.getElementById(‘element').style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。  DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式规则信息，如：getComputedStyle(obj,null)
window方法：getComputedStyle()
qq_37916164的博客
05-08 4863
一、getComputedStyle()方法 该window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后，报告元素的所有CSS属性的值。 单个CSS属性值通过对象提供的API或通过使用CSS属性名称进行索引来访问。 getComputedStyle()方法语法 //返回元素的所有CSS属性的计算值 var style = window.getComputedStyle（element [，pseudoElt ]）; ele.
Argument 1 does not implement interface HTMLFormElement. 问题解决 ajax 上传表格问题
clour88的博客
05-22 1218
Argument 1 does not implement interface HTMLFormElement. 解决方法 不直接使用 var formdata = new FormData($('#id-name')[0]), 修改为 var formdata = new FormData(); formdata.append('file',$('#id-name')[0]);
Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
热门推荐
monkeyfly学前端
05-28 6万+
Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。 前提 复制了一份别人写的自定义的显示隐藏方法，准备在我的js中用一下，结果使用后刚一运行就报错了。 问题代码如下所示： //自定义的控制显示或隐藏的方法，该方法接收两个参数，参数1表示要显示的元素，参数2表示要隐藏的元素（参数可以为空） function showOrhide(show,hide){...
Window.getComputedStyle is not an object问题（找不到元素的问题同理）
小菜鸡程序媛的挣扎史
08-09 2076
解决方法 把引入js放在html的<body>后部 或者 把js语句写在html的<body>后部 从上到下运行，先解析head标签中的代码， （1）head标签中会包含一些引用外部文件的代码，从开始运行就会下载这些被引用的外部文件 当遇到script标签的时候 浏览器暂停解析（不是暂停下载），将控制权交给JavaScript引擎（解...
window.getComputedStyle详解
WEBCODE
07-13 429
window.getComputedStyle 说明： getComputedStyle()返回元素的所有CSS属性的计算值 语法： var style = window.getComputedStyle(element[, pseudoElt]); 参数说明: element:目标元素的DOM对象 pseudoElt:指明要匹配的伪元素,对于普通元素必须指定为null(或省略)(o...
javascript-通过getComputedStyle()计算元素的所有样式
harmsworth的博客
04-07 1952
javascript-计算元素的所有样式 javascript-计算元素的所有样式 getComputedStyle() 兼容IE8 小结 在日常开发中，如果你需要读取html元素的style样式或class样式的属性值时，就可以使用DOM2级样式中新增的方法-getComputedStyle()。 getComputedStyle() getComputedStyle()方...
window.getComputedStyle(dom元素, null);
最新发布
05-27
`window.getComputedStyle(element, null)`是一种获取元素最终渲染样式的方法。它返回一个包含所有CSS属性及其值的对象，这些值是从计算值中获取的，计算值是浏览器计算后确定的元素样式。 `window....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值