为什么我只能在javascript中更改一次css样式？

在JavaScript中更改CSS样式的限制是由浏览器的渲染机制所决定的。当浏览器解析HTML文档时，会按照从上到下的顺序逐个加载和渲染元素。当遇到CSS样式表时，浏览器会解析其中的样式规则，并将其应用到相应的元素上。

在JavaScript中，我们可以通过操作DOM（文档对象模型）来修改元素的样式。DOM是浏览器提供的一种API，它将HTML文档表示为一个树状结构，每个元素都是树中的一个节点。通过JavaScript可以访问和修改这个树状结构，从而实现对元素的样式修改。

然而，由于浏览器的渲染机制，当我们通过JavaScript修改一个元素的样式时，浏览器会重新计算该元素及其子元素的样式，并重新渲染页面。这个过程是比较耗费资源的，特别是在涉及大量元素或复杂样式的情况下。

为了优化性能，浏览器会对样式修改进行优化，将多次修改合并为一次。这意味着，如果我们在JavaScript中连续多次修改同一个元素的样式，浏览器可能只会执行最后一次修改，而忽略之前的修改。

这种限制是为了避免不必要的重复计算和渲染，提高页面的性能和响应速度。如果需要在JavaScript中多次修改样式，可以考虑将这些修改合并为一次操作，或者使用CSS动画来实现更复杂的样式变化。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cmysql
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
腾讯云物联网平台（IoT Explorer）：https://cloud.tencent.com/product/ioe
腾讯云移动开发平台（MPS）：https://cloud.tencent.com/product/mps

相关·内容

JavaScript是如何工作的:渲染引擎和优化其性能的技巧

不同浏览器对于相同元素的默认样式并不一致，这也是为什么我们在 CSS 的最开始要写 *{padding:0;marging:0};，也就是我们要重置CSS默认样式的。...在渲染时，需要考虑 JavaScript 代码与页面上DOM 素交互的方式。 JavaScript 可以在 UI中创建大量更改，尤其是在 SPA 中。...以下是一些优化 JavaScript 渲染技巧：避免使用 setTimeout 或 setInterval 进行可视更新。这些将在帧中的某个点调用 callback ，可能在最后。...但是，如果你在访问 box 之前更改了它的样式(例如，通过动态地向元素添加一些 CSS 类),浏览器必须先应用样式更改并执行布局过程，这是非常耗时和耗费资源的，所以尽可能避免。...你的点赞是我持续分享好东西的动力，欢迎点赞！一个笨笨的码农，我的世界只能终身学习！

1.6K3 0

为什么我用 JavaScript 来编写 CSS

作为替代，我用 JavaScript 编写了所有的 CSS。我知道你在想什么：“为什么有人会用 JavaScript 编写 CSS 呢？！” 这篇文章我就来解答这个问题。...为什么我喜欢 CSS-in-JS？主要是 CSS-in-JS 增强了我的信心。我可以在不产生任何意外后果的情况下，添加、更改和删除 CSS。我对组件样式的更改不会影响其他任何内容。...如果删除组件，我也会删除它的 CSS。不再是只增不减的样式表了！✨ 信心：在不产生任何意外后果的情况下，添加、更改和删除 CSS，并避免无用代码。易维护：再也不需要寻找影响组件的 CSS 了。...提升的团队合作：无论经验水平如何，都会避开 CSS 常见的坑，以保持代码库整洁，并且开发更迅速。关于性能，CSS-in-JS 库跟踪我在页面上使用的组件，只将它们的样式注入 DOM 中。...当我动态更改该上下文时，该组件将自动应用正确的样式。? 动态样式：基于全局主题或不同状态设置组件样式。 CSS-in-JS 还提供 CSS 预处理器的所有重要功能。

1.3K5 0

50个有价值的CSS编写规则，让你写出更好的CSS

你可以创建自己的Javascript CSS加载器，也可以通过在页面中包含样式表时使用标记来延迟非关键CSS。...对此也有例外，但是，如果你的外部样式表中有样式、HTML 中的样式、Javascript 中的样式，则很难跟踪正在执行的更改，并且随着代码库的增长，它变得难以维护。...20、规范化或重置你的 CSS 每个浏览器都带有CSS元素的默认样式，并且这些样式各不相同，因此，你的东西可能在一个浏览器中看起来是一种方式，而在另一种浏览器中则不同，它可能具有你意想不到的额外边框或形状...更改 CSS 属性值比更改 HTML 中的所有文本要快得多，而且国际化也更好，因为它允许你根据需要编写文本并使用 CSS 操纵它的外观。...48 、在你寻求 Javascript 帮助之前先找到 CSS 解决方案我一直在分享如何在我的 Youtube UI/UX 库中尽可能多地使用 CSS 构建通用组件，我想让你明白的是，在你尝试添加

2.3K2 0

reflow和repaint（摘录自张鑫旭的翻译）

第一次让我开始思考关于回流(reflows)与重绘(repaints)的问题是在和ParisWeb上的Mr. Glazman做一个firey交换的时候。...注意：这里我限定了自己只能讨论CSS对回流的影响，如果您是一位JavaScript程序员，我是推荐您读一下我的reflow链接（zxx: 原作者收藏标记的一些关于reflow的一些文章或页面链接），有一些非常好的东西...的JavaScript表达式 (仅 IE 浏览器)（Avoid JavaScript expressions in the CSS (IE only)）尽可能在DOM树的最末端改变class 回流可以自上而下...我们尝试在一种无形的DOM树片段组进行更改，然后整个改变应用到DOM上时仅导致了一个回流。同样，通过style属性设置样式导致回流。...然而有另外一个原因为什么表格布局时很糟糕的主意，根据Mozilla，即使一些小的变化将导致表格(table)中的所有其他节点回流。

1.1K4 0

编写模块化CSS：命名空间

在今天的这篇文章中，我想与大家分享一下为什么只用BEM还是不够的，以及如何使用命名空间来弥补一些不足。 为什么BEM不能满足我们我上周给大家展示的例子很简单。...o-countdown中的元素的实际数量是无关紧要的，因为所有内部元素只能在.o-countdown里存在。对象独立于上下文当我说对象是上下文独立的时候，我的意思是他们不知道在哪里会被使用。...此更改表单的HTML可能是： ? 并且各自的（S）CSS更改是： ? 还有一件事。注意到了我混合了一个对象和组件类在.c-form__button里么？...如果将来有需要将o-countdown更改为c-countdown，我也不必担心破坏任何JS功能。 JavaScript钩子很简单，所以让我们继续吧。...“.t”或“.s”——排版类(Typography) 在排版中最好的做法是在网页上只使用少数样式（大小，字体等）。现在，你可能会在标题-中写出这样的排版风格： ?

2.6K7 0

研讨浏览器绘制和Web性能的注意事项

浏览器绘制 Web浏览器将HTML、CSS和JavaScript转换成已完成的过程视觉化表示是相当复杂的，涉及到很好的"魔术"。...这就是为什么许多Web开发人员倾向于通过使用某种前端框架来部分解决这个问题，比如React，除了许多其他优点之外，它还可以帮助高度优化DOM中的更改，以避免不必要的重新计算或渲染。...在这个特殊的例子中，增加的绘画是由页面上的动画GIF和canvas drawing(在60 fps)的组合造成的，两者都不会导致DOM或其样式的任何更改，同时仍然触发绘画。...众所周知，GIF有许多问题，其中性能当然是其中之一，所以我肯定不能在整个页面背景中使用GIF。在这种情况下，使用JavaScript绝对是一种选择，使用画布canvas也会有所帮助。...我决定选择只使用CSS的方法。我的解决方案是把一个小的“噪音”png图像作为一个background-image，启用background-repeat把它扔到单色背景上。如何达到噪音效果呢？

1.1K3 0

嚯！原来这样就可以提升页面首屏的渲染性能

如果它是一个样式表文件，浏览器必须在渲染页面之前完全解析它，这就是为什么 CSS 会阻塞渲染的原因。如果是脚本，浏览器必须：停止解析，下载脚本，然后运行。...只有在那之后它才能继续解析，因为 JavaScript 程序可以改变网页的内容（尤其是 HTML）。这就是为什么 JS 会阻塞解析的原因。...减少要传输的数据量首先，移除所有未使用的部分，例如 JavaScript 中无法访问的函数、带有从不匹配任何元素的选择器的样式以及被 CSS 永远隐藏的 HTML 标签。其次，删除所有重复项。...因此，我们可以直接跳过所有流程中没有涉及的样式以及脚本文件。样式为了告诉浏览器不需要特定的 CSS 文件，我们应该为所有引用样式表的链接设置媒体属性。...这部分程序会在你以 HTML 格式请求的资源之前进行扫描，以便一次发出多个请求并让它们并行运行。这就是为什么在 HTML（逐行）以及脚本标签中保持样式标签彼此靠近的原因。

7344 0

前端性能优化

JS和CSS 减少DNS查找压缩JavaScript和CSS 少用iframe JS文件异步/按需加载图片懒加载在具体编程方面，再补充几个点。...为什么呢？首先，补充一下浏览器相关的知识。下图为浏览器结构： ?...DOM元素，但是，依旧多次更改DOM元素）： // 只获取一次container let container = document.getElementById('container'); for(let...DOM container.appendChild(content) 例子2：更改DOM元素样式不好的行为（逐条更改样式）： const container = document.getElementById...container.style.width = '100px'; container.style.height = '200px'; container.style.color = 'red'; 改造（利用class，只改动一次样式

8793 0

重绘和回流（Repaint & Reflow），如何优化

renderTree 我们就知道节点的样式，然后计算大小和位置，把节点绘制到页面上由于浏览器的流式布局，对renderTree的计算通常遍历一次就可以完成，table内部元素除外，他们可能要计算多次，...通常要花费3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一 2.重绘由于节点的几何属性发生改变或者由于样式改变而不影响布局的，称为重绘，例如outline,visibility,color...尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。...避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。...2.JavaScript 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。

7161 0

web 编写优秀 CSS 代码的 8 个策略

我认为这主要是因为许多开发人员对组织CSS / HTML和JavaScript的策略缺乏深刻的理解。在我和我们团队的观念中，编写可维护的前端代码非常重要。...仅仅因为你的一次性元素和配置对你有意义，并不意味着它们对下一个可能继承应用程序的人有意义。为了防止这篇文章太长，我今天将主要讨论CSS代码。JavaScript代码是另一个完全不同的棘手问题。...实用程序背后的理念是，你认为你可能会不止一次地使用它们。如果它是一次性样式，或者如果你认为组合样式会经常使用，那么可能它作为CSS类将可以更好地工作。...现在你可能想要确保列表元素中的所有锚标记是红色的，但是你不知道未来的元素会怎么样以及可能会对设计做出什么样的更改。你可能会问，“好的亲，那么你怎么解决上面的问题呢？”...这真的是BEM最棒的地方，也是为什么我建议使用它的原因。 6.只使用!inportant作为最后的手段在一个类上放上!

2.2K0 0

编写优秀 CSS 代码的 8 个策略

9926 0

按钮样式的正确方式

在本教程中，我们将为和元素以及一个自定义.btn的CSS组件创建基本样式。你会在这个过程的每一步中找到一个演示页面。...在整个Web上，我们可以看到很多触发JavaScript操作的按钮，仔细检查后发现它们是用，或编码的。 为什么元素如此不受待见？...CSS组件是一种风格或样式集合，我们可以使用类来应用，通常在几种不同类型的HTML元素之上。您可能熟悉Bootstrap或Foundation等CSS框架中的这个概念。...在我见过的大多数Web项目中，设计师都指定了预期的鼠标移过样式，但未指定焦点样式。我们应该做什么？...但在某些浏览器中，focus样式会一直保留，直到用户点击页面上的其他内容为止。在我的测试中，受影响的浏览器包括Chrome（66），Edge（16）和Firefox（60，仅用于链接）。

3.6K2 0

为什么和 CSS-in-JS 说拜拜

虽然我只使用了Emotion，但我相信本文的所有观点也适用于styled-components。...问题是，在使用普通的CSS时，很难实现 colocation，因为CSS和JavaScript必须放在单独的文件中，而且无论.css文件在哪里，你的样式都会全局应用。...另一方面，如果使用CSS-in-JS，可以直接在使用它们的React组件中编写样式如果操作得当，这将极大地提高应用程序的可维护性。 3.可以在样式中使用JavaScript变量。...以下是我在观察Compiled时看到的缺点：样式仍然是在组件第一次挂载时插入的，这迫使浏览器在每个DOM节点上重新计算样式。(这个缺点已经在 "丑"一节中讨论过了）。...像本例中的 color prop 这样的动态样式不能在构建时提取，所以Compiled使用 style prop（又称内联样式）将该值添加为CSS变量。

2.3K2 0

html+css面试题集锦（一）

web标准简单来说可以分为结构、表现和行为，其中结构主要是有HTML标签组成，或者通俗点来讲，在页面Body中我们写入的标签都是为了页面的结构，表现指css样式表，通过css可使页面的结构标签更具美感，...最常见也是最推荐的引入css的方式，使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。...并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。...区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。 5.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和!important哪个优先级高?...3）减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源。 9.谈谈对响应式布局的看法。响应式布局有缺点也有优点。

9701 0

浏览器的回流与重绘 (Reflow & Repaint)

由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一...)、scrollIntoViewIfNeeded() getComputedStyle() getBoundingClientRect() scrollTo() 重绘 (Repaint) 当页面中元素样式的改变并不影响它在文档流中的位置时...现代浏览器会对频繁的回流或重绘操作进行优化：浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次...如何避免 CSS 避免使用table布局。尽可能在DOM树的最末端改变class。避免设置多层内联样式。将动画效果应用到position属性为absolute或fixed的元素上。...避免使用CSS表达式（例如：calc()）。 JavaScript 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。

6482 0

前端不止：Web性能优化 - 关键渲染路径以及优化策略

可能会访问样式属性，所以它会阻止JavaScript的执行直到styles.css返回并完成CSSOM构建，然后执行这一段JavaScript代码，再继续后面DOM的构建和相关渲染操作。...---- 优化策略我们花了大量的篇幅来理解浏览器的渲染过程，理解DOM，CSSOM，渲染树，浏览器绘制，分析HTML，CSS和JS在渲染过程中的关系，我相信你已然受益匪浅，现在，我们来运用这些知识加速你的网站...首先，对于阻塞渲染的JavaScript，应该将它放置在页面body的底部，为什么呢？...3、尽早和按需的加载CSS 你可能在思考，有没有异步加载CSS的需求？我认为不应该有，页面应该只引用与该页面相关的样式文件。（只不过很多时候，我们将所有的CSS都打包在了一个压缩的CSS文件中了。）...所以，我们应该尽早的开始对样式资源的请求，将它尽早、尽快地下载到客户端，这样解释了为什么我们看到样式资源的link标签一般都放在head表中： <!

1K3 0

再见，CSS-in-JS

虽然我只使用过 Emotion,但我认为本文中的观点几乎全部适用于 styled-components。...注意：CSS Modules 也允许样式与组件同位，但不在同一文件中。可以在样式中使用 JavaScript 变量。...能在样式中使用 JavaScript 常量在某些情况下可以减少重复代码，因为同一个常量不必在 CSS 变量和 JavaScript 常量中各定义一次。...一种更高效的方法是将样式移到组件外部，这样序列化只在模块加载时执行一次，而不是每次渲染时都执行。...我在“优点”部分提到的 CSS-in-JS 的主要好处是：样式是局部作用域的样式与组件同位可以在样式中使用 JavaScript 变量如果你细心的话，就会记得我说过 CSS Modules 也提供了局部作用域样式和同位

3165 0

chrome对页面重绘和回流以及优化进行优化

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。...伪类，比如 :hover (IE 中为兄弟结点伪类的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation...优化重绘回流CSS避免使用table布局。尽可能在DOM树的最末端改变class。避免设置多层内联样式。将动画效果应用到position属性为absolute或fixed的元素上。...避免使用CSS表达式（例如：calc()）。JavaScript避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。...告诉浏览器，我这块结构跟其他的单独渲染，不要搅和全页面了。参看文章：回流与重绘：CSS性能让JavaScript变慢？

7621 0

前端| 性能优化总结

但是只针对CSS而不是HTML，浏览器将DOM和CSSOM结合来渲染web页面） 05 （1）使用字体图标iconfont代替图片图标（2）压缩字体文件 fontmin0webpack对字体文件进行压缩...用 JavaScript 修改样式时，最好不要直接写样式，而是替换 class 来改变样式。下面有详情解释。...现代浏览器会对频繁的回流或重绘操作进行优化：浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次...避免方法如下： CSS 避免使用 table 布局。尽可能在 DOM 树的最末端改变 class。避免设置多层内联样式。...避免使用 CSS 表达式（例如：calc()）。 Javascript 避免频繁操作样式，最好一次性重写 style 属性，或者将样式列表定义为 class 并一次性更改 class 属性。

7062 0

前端练级攻略(第一部分)

一些网站使用 CSS框架或混淆它们的 CSS 类名，使你很难阅读它们的源代码。这就是为什么我选择了几个设计良好的网站，易于阅读源代码。...像 transition 这样的 CSS 属性需要厂商前缀才能在不同的浏览器中正常工作。在本文中，我可以阅读更多关于供应商前缀的信息，即 CSS供应商前缀。...当您第一次得知有 CSS预处理器和后处理器时，你很有可能在任何地方已经使用它们。但是，从简单开始，仅在必要时添加变量和 mixin 等扩展。...这里有一套样式指南和编码规范，将教你如何成为一个更有效的前端。样式指南 ? Web 样式指南是可以在整个网站中重用的 CSS 组件和模式的集合。...本文是两部分系列中的第一部分。第二篇文章介绍了如何使用 Javascript 和 Javascript库/框架添加交互性，共勉，同进步。你的点赞是我持续分享好东西的动力，欢迎点赞！

1.3K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云