DOM-6 【兼容】读写样式属性、操作伪元素、运动元素初探

最新推荐文章于 2022-05-14 15:35:02 发布
最新推荐文章于 2022-05-14 15:35:02 发布
阅读量207 收藏
点赞数
分类专栏： 系统学习 # DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43503511/article/details/117630392
版权
本文探讨了DOM中读写样式属性的兼容性问题，包括通过元素.style和window.getComputedStyle()获取计算样式。同时，讨论了offsetWidth/offsetHeight在不同盒子模型下的行为，并强调了在js动画中使用时的注意事项。此外，还介绍了如何通过类名控制伪元素以及在下拉选组件动画中的最佳实践，如防止抖动现象。
摘要由CSDN通过智能技术生成

规范

<style type="text/css"></style>

<script type="text/javascript"></script>

读写样式属性

  1. .style是访问不到css样式表的，只能访问到行内/内联的属性，当未设置行内属性时，结果为空字符串
    在这里插入图片描述
  2. 设置时，对复合值需要拆解赋值，不拆解效率更低
oDiv.style.weight='200px';
oDiv.style.border='5px solid #000';
// 更合适的写法如下，拆解
oDiv.style
最低0.47元/天 解锁文章
Stephy_Yy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java实验《声明不同数据类型的变量》
qq_40641046的博客
10-09 1465
java实验《声明不同数据类型的变量》 编写声明不同数据类型变量的程序文件 KY2_1.java，源代码如下。 `package czxt; public class KY2_1 { public static void main(String args[]) { byte b=0x55; short s=0x55ff; int i=1000000; long l=0xffffL; char c=‘a’; float f=0.23F; double d=0.7E-3; boolean B=true; S
react中报错Failed to set an indexed property on ‘CSSStyleDeclaration‘: Index property setter is not sup
kilig
10-26 4129
其实这不算是一个问题，是你的一个小疏忽！ 当我们在react中使用less文件书写CSS样式的时候，组件中我们声明页面元素的类名应该写成： <Row className={style.mainContainer}></Row> 注： 这个style是我们引入的less文件的别名 import style from './style.less'; 而出现上面的报错是因为你疏忽在行内样式声明里写了元素的类名，如下： <Row style={s
These styles are computed, and therefore the ‘visibility‘ property is read-only.“
Boo_crob的博客
12-23 703
These styles are computed, and therefore the ‘visibility’ property is read-only."报错原因及处理方法 要实现的样式：点击“关注公众号”，弹出遮罩层和二维码图片，此时我的遮罩层可以实现toggle样式，（点击弹出遮罩层，在点击隐藏遮罩层效果）。问题在于图片不显示。↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓，我开始看报错，他说，visibility是只读属性，不能修改。这很奇怪，因为这个属性是一定可以修改的，于是我开始看我的代
[ant-design-vue问题] 报错：Failed to set an indexed property on ‘CSSStyle Declaration’
前端
04-23 4449
版本信息如下 报错信息 设置table的字体颜色不能使用style了 ant-design-table: 2.x版本设置属性字体颜色时可以 customRender:({text, record, index, column}) => { const obj = { children: text, props: { rowSpan: record.rowspan, style: `color:red;`
【DOM】DOM操作之如何修改元素的样式_03
青春木鱼的博客
05-14 5528
DOM操作之如何修改元素的样式，无论修改内联样式还是修改样式表中的样式，都使用：元素.style.css属性名="属性值"来修改、另外，今后只要获得css属性值，都要获得计算后的样式：var style=getComputedStyle(元素对象) ，然后从style中获取对应的css属性值：style.css属性
六、读写样式属性、操作伪元素、元素运动初探
布白的博客
02-08 724
六、读写样式属性、操作伪元素、元素运动初探 一、读写样式属性 1.1 element.style.xxx DOM无法直接操作CSS样式表，而是通过操作标签上的style属性来修改/访问样式。 DOM动态设置行内样式的特点： 属性值可读可写。 多个单词属性名使用小驼峰形式。 属性值的写法必须为字符串。 复合值一定要拆解赋值，利于排除错误。 保留字前加css。 <style type="text/css"> .box { width: 200px; } </st
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
10-24
此外，由于伪元素不在DOM中，它们的样式不能通过`element.style`属性访问，只能通过`getComputedStyle`。 随着浏览器对CSS和JavaScript的支持不断加强，使用这些技术可以创建更高级的动态效果，比如响应式的提示...
jQuery修改CSS伪元素属性的方法
10-25
然而，由于伪元素不是DOM（文档对象模型）元素，所以我们无法直接通过JavaScript或jQuery来操作它们。尽管如此，还是有方法可以间接实现修改CSS伪元素的属性。 在上述文件内容中，提到了两种主要方法来使用jQuery...
JS的框架Polymer中的dom-if和is属性使用说明
10-23
在讨论Polymer框架中dom-if和is属性的使用之前，我们先简单了解一下Polymer框架本身。Polymer是由Google开发的一套用于构建Web组件的JavaScript库。它的主要目标是简化Web组件的开发，并且推广Web组件的标准。通过...
详解CSS 伪元素及Content 属性
09-22
关于JavaScript操作伪元素时，由于伪元素不存在于DOM中，而是位于CSSOM（CSS对象模型），我们不能直接通过JavaScript修改伪元素的样式。为了读取伪元素的样式信息，我们可以使用window.getComputedStyle方法，这是一...
react中报错Failed to set an indexed property on 'CSSStyleDeclaration': Index property setter is not sup...
经典鸡翅
11-20 3869
产生这个报错的原因是我当时将样式写到了less文件，我在div中使用的使用应该是使用className = ，而我误写了一个style = 。style里面当然没有自定义的className，所以产生报错，举个例子，你的className叫mycontent，自然style里面不会有的。所以报错，遇到此报错细心查找一下即可。 ...
CSSStyleDeclaration.setProperty，修改样式中的important
alibeibei的博客
08-28 2263
       今天工作上遇到了一件很不解的事情，就是之前有同事用css样式去编写了一个dom对象的样式且用到了!important这个属性值，而我们用的是同一个插件，为了不影响她的之前代码，我决定在条件上重置回来我自己所需的地方，尝试了很多遍，不管怎么修改，就是达不到我想要的效果，不管用原生JS，dom.style.backgr...
Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element
热门推荐
阿涩的博客
07-30 2万+
Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string. 这个错是给input的file赋...
DOMException: Failed to set the ‘value‘ property on ‘HTMLInputElement‘:
Mr_Van的博客
08-02 8166
This input element accepts a filename, which may only be programmatically set to the empty string 学习Vue的路上又遇到了个小坑，关于file数据绑定的问题。 DOMException: Failed to set the ‘value’ property on ‘HTMLInputElement’: This input element accepts a filename, which may only
DOM-6 【读写样式属性-操作伪元素】
Yesterday_Tomorrow的博客
11-17 607
一.读写样式属性 (1)..style .style是访问不到css的，只能访问到行内的属性 oDiv.style.width//"" 行内样式的增加(值必须为字符串，复合值要拆解赋值) oDiv.style.weight='200px'; oDiv.style.border='5px solid #000';//这是错误的方式 oDiv.style.borderWidth='5px';//正确的方式 oDiv.style.borderStyle='solid';//正确的方式 oDiv.
24 React.createRef()用法细节分析
Stephy_Yy
10-12 1990
通过React.createRef → ref对象 通过元素的ref属性可以附加到React元素上 一般通过构造器中给this的属性赋值一个ref，方便整个组件使用 ref只要传递到react元素中，就可以利用ref的current属性访问到该真实DOM节点 ref在componentDidMount和componentDidUpdate触发前更新 current里是null的现象 由于打印时，this.modalRef才刚刚声明，current是null，但是current是个引用值，展开时访问的是.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值