使用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'）将结束循环遍历每个匹配选择器的项目并单独设置style属性。这真的是低效率的，如果你有数百个元素，它会导致问题。

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屋！