如何使用Javascript重新定义CSS类

时间:2008-11-05 17:37:01

标签: javascript css

假设我们已经定义了一个CSS类,它正在应用于页面上的各种元素。

colourful
{
    color: #DD00DD;
    background-color: #330033;
}

人们抱怨颜色,他们不喜欢粉红色/紫色。因此,您希望让他们能够按照自己的意愿更改样式,并且可以选择自己喜欢的颜色。你有一个小的颜色选择器小部件调用Javascript函数:

function changeColourful(colorRGB, backgroundColorRGB)
{
    // answer goes here
}

该功能的主体是什么?

目的是当用户在颜色选择器上选择一个新颜色时,class="colourful"的所有元素都会改变它们的样式。

9 个答案:

答案 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;
      }

   }


}