假设我们已经定义了一个CSS类,它正在应用于页面上的各种元素。
colourful
{
color: #DD00DD;
background-color: #330033;
}
人们抱怨颜色,他们不喜欢粉红色/紫色。因此,您希望让他们能够按照自己的意愿更改样式,并且可以选择自己喜欢的颜色。你有一个小的颜色选择器小部件调用Javascript函数:
function changeColourful(colorRGB, backgroundColorRGB)
{
// answer goes here
}
该功能的主体是什么?
目的是当用户在颜色选择器上选择一个新颜色时,class="colourful"
的所有元素都会改变它们的样式。
答案 0 :(得分:6)
我实际上会实现这个服务器端;只需将用户首选的颜色存储在会话中(通过cookie或任何好的方便),并动态生成CSS,即
colourful {
color: ${userPrefs.colourfulColour};
background-color: ${userPrefs.colourfulBackgroundColour};
}
如果它通过Javascript更好地适合你,你可以使用Javascript操作CSS。例如,见:
答案 1 :(得分:5)
var setStyleRule = function(selector, rule) {
var stylesheet = document.styleSheets[(document.styleSheets.length - 1)];
if(stylesheet.addRule) {
stylesheet.addRule(selector, rule)
} else if(stylesheet.insertRule) {
stylesheet.insertRule(selector + ' { ' + rule + ' }', stylesheet.cssRules.length);
}
};
答案 2 :(得分:3)
jQuery的:
function changeColourful(colorRGB, backgroundColorRGB)
{
$('.colourful').css({color:colorRGB,backgroundColor:backgroundColorRGB});
}
如果您希望更改在页面中保留,则必须将它们存储在cookie中,并且每次都重新应用该功能。
答案 3 :(得分:3)
我刚尝试使用空的< style>标记在< head>中,然后动态填充它。似乎至少在ff3中工作。
所以:
在< head>中,插入类似的东西:
<style id="customstyle" type="text/css"></style>
现在您可以使用类似jquery的内容来替换或附加其内容:
替换:
$("#customstyle").text(".colourful { color: #345 ; }");
追加:
$("#customstyle").append(".colourful { color: #345 ; }");
如果您想将其保存在某处,只需抓住内容:
var csscontent = $("#customstyle").text();
..然后你可以通过ajax将它发送回服务器。
答案 4 :(得分:2)
我不知道直接操纵类,但你可以有效地做同样的事情。这是jQuery中的一个例子。
$('.colourful').css('background-color', 'purple').css('color','red');
在普通的javascript中,你需要做更多的工作。
答案 5 :(得分:1)
首先检查是否定义了document.styleSheets
(参见@ alex的回复)。
如果没有,这个问题应该有所帮助:
Get All Elements in an HTML document with a specific CSS Class
请参阅接受答案中的链接以及底部的回复。
这只是答案的一部分。您仍然需要使用每个元素的样式属性来应用新值。
答案 6 :(得分:1)
特定div / color的快速示例 - 可以通过函数动态传入
document.getElementById('Your Div Name Here').style.background = 'white';
或者,更改指定项目的类
document.getElementById('Your Div Name Here').classname = 'newclassname'
假设你可以用这种方式指定div,如果没有,这个和节点循环解决方案Kevin的组合应该可以做到这一点
答案 7 :(得分:0)
这是将背景图像更改为样式表的完整示例。 第一部分找到合适的样式表。在这里,我想要最后一个,其href包含“mycss.css”。您还可以使用title属性。
第二部分找到正确的规则。在这里,我放了一个标记“MYCSSRULE”,这样我就能找到合适的规则。
mycss.css中的css规则是:#map td,MYCSSRULE {background-image:url(“img1.png”); }
第三部分只是改变了规则。
此过程不适用于Internet Explorer 6.(IE 8可以)。适用于Firefox 3和Webkit。
希望它有所帮助。
function changeBgImg(newimage) {
var i,n;
var ssheets = document.styleSheets; // all styleSheets. Find the right one
var ssheet;
// find the last one whose href contain "myhref"
n = ssheets.length;
for (i=n-1; i>=0 ;i--) {
var thisheet = ssheets[i];
if ( (null != thisheet.href) && (thisheet.href.indexOf("mycss.css") != -1) ) {
ssheet = thisheet; break;
}
}
if ( (null == ssheet) || ("undefined" == typeof(ssheet.cssRules))) {
// stylesheet not found or internet explorer 6
return;
}
// find the right rule
var rule;
n = ssheet.cssRules.length;
for (i=0; i<n; i++) {
var r = ssheet.cssRules.item(i);
if (typeof(r.selectorText) == "undefined") { continue; }
if (r.selectorText.indexOf("MYCSSRULE") != -1) {
rule = r; break;
}
}
if (null == rule) {
// not found
return;
}
rule.style.backgroundImage = "url(" + newImage + ")";
}
答案 8 :(得分:-1)
像
这样的东西function changeColourful(colorRGB, backgroundColorRGB)
{changeColor (document, colorRGB, backgroundColorRGB)}
function changeColor (node, color, changeToColor)
{
for(var ii = 0 ; ii < node.childNodes.length; ii++)
{
if(node.childNodes[ii].childNodes.length > 0)
{
changeColor(node.childNodes[ii], color, changeToColor);
}
if(node[ii].style.backgroundColor == color)
{
node[ii].style.backgroundColor = changeToColor;
}
}
}