使用 JavaScript/jQuery 动态修改 CSS 类属性值 [英] Modifying CSS class property values on the fly with JavaScript / jQuery

问题描述

我遇到了一种独特的情况，到目前为止我无法找到解决方案:动态地为 CSS 样式分配一个值.我知道如何使用 jQuery 为元素分配宽度、高度等，但我真正想做的是更改样式表中定义的值，以便可以将动态创建的值分配给多个元素.

I've run into a unique situation that I have so far been unable to find a solution for: dynamically assigning a value to a CSS style. I know how to use jQuery to assign width, height, etc. to an element, but what I'm trying to do is actually change the value defined in the stylesheet so that the dynamically-created value can be assigned to multiple elements.

我正在构建的是占据整个视口的图像的幻灯片，在调整大小时重新计算图像的宽度、高度和左属性，以便图像始终居中，有利于宽度大于高度，除非视口较高比它宽(调整大小不会重新加载页面，只会触发一个函数来调整图像大小).

What I'm building is a slideshow of images that occupy the full viewport, recalculating the image's width, height, and left properties on resize so that the image is always centered, favors width over height, except when the viewport is taller than it is wide (resizing does not reload the page, just fires a function to resize the image).

我已经成功地让它在一张图像上工作，现在我正在尝试确定将这些属性值分配给幻灯片中的所有图像的最佳方法，而不必为每张图像分别指定这三项内容.

I have successfully been able to get it to work on one image, and now I'm trying to determine the best way to assign those property values to all images in the slideshow without having to specify those three things individually for every image.

类中的属性值可以动态修改吗?我确定答案就在那里，我可能只是在搜索中没有使用正确的术语.希望我在描述问题方面做得很好.TIA.

Can the values of properties in a class be modified on the fly? I'm sure the answer is out there, I'm probably just not using the correct terminology in my searches. Hope I did a good job of describing the problem. TIA.

推荐答案

与这里的一些答案相反，使用 Javascript 编辑样式表本身不仅是可能的，而且性能更高.简单地执行 $('.myclass').css('color: red') 将最终遍历匹配选择器的每个项目并单独设置样式属性.这确实效率低下，如果您有数百个元素，就会导致问题.

Contrary to some of the answers here, editing the stylesheet itself with Javascript is not only possible, but higher performance. Simply doing $('.myclass').css('color: red') will end up looping through every item matching the selector and individually setting the style attribute. This is really inefficient and if you have hundreds of elements, it's going to cause problems.

更改项目的类是一个更好的主意，但您仍然会遇到同样的问题，因为您要更改 N 个项目的属性，这可能是一个很大的数字.更好的解决方案可能是更改单个父项或少量父项的类，然后使用 css 中的级联"命中目标项.这适用于大多数情况，但不是全部.

Changing classes on the items is a better idea, but you still suffer from the same problem in that you're changing an attribute on N items, which could be a large number. A better solution might be to change the class on one single parent item or a small number of parents and then hit the target items using the "Cascade" in css. This serves in most situations, but not all.

有时您需要将很多项目的 CSS 更改为动态的，或者通过点击少数父项来实现这一点没有什么好方法.更改样式表本身，或添加一个小的新样式来覆盖现有的 css，是一种非常有效的更改项目显示的方法.您只在一处与 DOM 交互，而浏览器可以真正有效地部署这些更改.

Sometimes you need to change the CSS of a lot of items to something dynamic, or there's no good way for you to do so by hitting a small number of parents. Changing the stylesheet itself, or adding a small new one to override the existing css is an extremely efficient way to change the display of items. You're only interacting with the DOM in one spot and the browser can handle deploying those changes really efficiently.

jss 是一个库，可帮助您更轻松地从 javascript 直接编辑样式表.

jss is one library that helps make it easier to directly edit the stylesheet from javascript.

这篇关于使用 JavaScript/jQuery 动态修改 CSS 类属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！