堆栈内存溢出
  繁体   English   中英

如何使用Javascript重新定义CSS类

[英]How to redefine CSS classes with Javascript

 原文  2008-11-05 17:37:01  2   9    javascript/ css

问题描述

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

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

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

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

这个功能的主体是什么？

目的是当用户在颜色选择器上选择新颜色时，所有具有class="colourful"的元素将改变其样式。

9 个解决方案

解决方案1
 6  2008-11-05 17:58:02

我实际上会实现这个服务器端; 只需在用户的会话中存储用户的首选颜色（通过cookie或任何好的和简单的方式）并动态生成CSS，即 

colourful {
  color: ${userPrefs.colourfulColour};
  background-color: ${userPrefs.colourfulBackgroundColour};
}

如果它真的更适合你通过Javascript做到这一点，你可以使用Javascript操纵CSS。 例如，见：

解决方案2
 5  2008-11-05 18:16:35

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);
    }
};

解决方案3
 3  2008-11-05 18:18:26

jQuery的： 

function changeColourful(colorRGB, backgroundColorRGB)
{
    $('.colourful').css({color:colorRGB,backgroundColor:backgroundColorRGB});
}

如果您希望更改在页面中保持不变，则必须将它们存储在cookie中并每次都重新应用该功能。

解决方案4
 3  2008-11-05 21:55:50

我只是尝试在<head>中使用一个空的<style>标签，然后动态填充它。 似乎至少在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将它发送回服务器。

解决方案5
 2 已采纳  2008-11-05 18:15:52

我不知道直接操纵类，但你可以有效地做同样的事情。 这是jQuery中的一个例子。 

$('.colourful').css('background-color', 'purple').css('color','red');

在普通的javascript中，你将不得不做更多的工作。

解决方案6
 1  2008-11-05 18:04:02

首先检查是否定义了document.styleSheets （请参阅@ alex的响应）。

如果没有，这个问题应该有用：
使用特定的CSS类在HTML文档中获取所有元素

请参阅接受答案中的链接以及底部的回复。

这只是答案的一部分。 您仍然需要使用每个元素的样式属性来应用新值。

解决方案7
 1  2008-11-05 18:09:39

特定div / color的快速示例 - 可以通过函数动态传递 

document.getElementById('Your Div Name Here').style.background = 'white';

或者，更改指定项的类 

document.getElementById('Your Div Name Here').classname = 'newclassname'

那假设你可以用这种方式指定div，如果没有，这个和节点循环解决方案Kevin的组合应该做的伎俩

解决方案8
 0  2012-01-01 21:48:57

这是将背景图像更改为样式表的完整示例。 第一部分找到合适的样式表。 在这里，我想要最后一个，其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 + ")";
}

解决方案9
 -1  2008-11-05 17:50:10

就像是 

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

   }


}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在控制台中重新定义 JavaScript（不是 CSS）类？ 如何在JavaScript中重新定义数组上的+运算符？ <font size=1-7>在CSS或JavaScript中</font>重新定义HTML Javascript / JQuery：如何重新定义？ 如何在Javascript中重新定义`this`？ Javascript：如何取消定义（或重新定义）“ let”定义的变量 页面加载后如何在javascript中重新定义路径 javascript - 了解css类如何更改/更新 如何使用JavaScript更新Animate.css类 如何在JavaScript中单击按钮更改CSS类？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM