使用JavaScript修改与给定CSS类关联的CSS属性 [英] Modifying CSS properties associated to a given CSS class using JavaScript

问题描述

我有一个链接到文本输入的JavaScript颜色选择器.我希望我的几个彩色元素在更新该颜色输入时更改其颜色.我可以创建几个类，每种颜色一个类(蓝色，红色，绿色等)，但是我希望拥有整个24位的coloe调色板，而不仅仅是其中的几个. 是否可以修改与给定CSS类关联的属性的值?如果是，修改这些值会实时在渲染的页面上应用新值吗? 在此先感谢:)

I have a JavaScript color picker linked to a text input. I would like several colored elements on my to change their color on the update of that color input. I could create several classes, one for each color (blue, red, green, etc), but i would like to have the whole 24 bits coloe palette, not just a few of them. Is it possible to modify the value of the properties associated to a given CSS class ? If yes, will modifying these values apply new values on the rendered page in real time ? Thanks in advance :)

推荐答案

完全可能，是的，它将实时更新.

Totally possible, and yes it will be updated in real time.

这里是一个函数，用于进行类属性更新，该函数与mouseover事件相关联(需要jQuery 1.0+).将鼠标悬停在id为myDiv的div上，所有mydivDivs类的div的CSS背景颜色都会更新为白色:

Here is a function to do the class property update, tied to a mouseover event (requires jQuery 1.0+). Mousing over div with id myDiv will update the CSS background color to white for all div's with class myColorDivs:

$('#myDiv').mouseover(function() {

    $('.myColorDivs').css('background', '#fff');

});

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