在运行时更改 CSS 规则答案

【问题标题】：Change CSS rule at runtime在运行时更改 CSS 规则
【发布时间】：2011-08-09 15:46:51
【问题描述】：

如何在运行时更改任何 CSS 属性？
假设我有：

#mycss {
   background:#000;
   padding:0;
}

那么在运行时，#mycss 应该是：

 #mycss {
    background:#fff;
    padding:10px;
    }

------------**编辑***-------------------------------- ------------

对不起各位，我真的是 HTML 世界的新手...

我的问题或疑问，无论是什么，我想创建一段代码，只需在输入框上输入一个值（例如color: #fff 或white），然后当我点击按钮，它将当前 CSS 背景颜色从默认颜色（#000）更改为用户定义的颜色（例如#fff）。

【问题讨论】：

运行时是什么？当你的应用加载时，什么服务器端应用？
“运行时”是什么时候？您想在有人单击按钮时执行此操作，还是出于某种原因在“运行时”期间立即更改？

标签： html css stylesheet

【解决方案1】：

您可以通过以下任何方式更改它：

在页面中添加样式声明
在元素上添加内联样式声明
使用jQuery改变元素的样式

其他样式解决方案：

<style type='text/css'>
    #mycss{ background: #fff; padding: 10px; }
</style>

内联样式解决方案：

使用id='mycss' 将以下style='background: #fff; padding: 10px' 添加到您的元素中

jQuery 解决方案（显然需要您包含jQuery）：

$('#mycss').css('background-color','#FFFFFF').css('padding','10px');

------------------------------------------ - - - - - - - - 编辑 - - - - - - - - - - - - - - - - - --------------------------------

使用 jQuery - 我相信我实现了您在编辑中寻找的功能。它也可以用纯 javascript 来完成，如果你想要那个解决方案，请告诉我，这里有一个演示。

Type any color and change the background (Red, #F7F6F5, Purple, #999 etc.)

//On Button Click - changes background on click...
$('#change').click(function()
{
    $('body').css('background-color',$('#color').val()); 
});


//On Textbox Change - changes background when the textbox changes...
$('#color').change(function()
{
         $('body').css('background-color',$(this).val());               
});

【讨论】：

@php_newbie - 我在答案底部添加了一个区域以及一个示例。让我知道这是否符合您的需要。
优秀！！。干杯。你明白了 :-) 谢谢里奥爵士。

【解决方案2】：

有多种方式可以覆盖 css 规则：

任何元素都将采用最靠近您包含的 css 文档底部定义的 css 规则。
任何内联样式都会覆盖 css 文档中定义的 css 规则。
任何 javascript 都能够动态调整任何给定元素的 css 属性。
任何元素都可以具有!important 的属性，这会破坏任何其他定义。

【讨论】：

【解决方案3】：

将 jQuery 添加到您的页面。那么：

$(function() {
    $('#mycss').css('background-color', '#FFFFFF');
    $('#mycss').css('padding', '10px');
});

查找 .css() 方法的文档。

但是，是的，没有人真正知道您所说的“运行时”是什么意思。

【讨论】：

【解决方案4】：

首先，CSS 应该作为“标题”链接插入：

<link rel="stylesheet" href="css/fillCtrl.css" title="fillCtrl">

如果我要改变这个 CSS 下一个选择器（不管 [ctr-panel~="button"] 是什么意思）：

[ctr-panel~="button"] {
    width: 25px;
    min-width:  25px;
}

在 JS 中这样做：

    for (var i = 0; i < document.styleSheets.length; i++) {
        var sheet = document.styleSheets[i];
        if (sheet.title == 'fillCtrl'){
            for (var j=0, n=sheet.cssRules.length; j < n; j++){
                var rule = sheet.cssRules[j]
                if (rule.selectorText == '[ctr-panel~="button"]'){
                    rule.style.cssText="width: 12px; min-width: 15px;"
                }
            }
        }
    }

显然，找到合适的 rule.style 可能是另一种逻辑。

【讨论】：

【解决方案5】：

首先，网站没有runtime。如果我猜对了，您想在 JS 发送到客户端后对其进行操作，而这只能使用 JavaScript。

【讨论】：

是的，先生，请原谅我对这件事一无所知:-)

【解决方案6】：

你有几个选择：

使用php在页面中注入动态css
用javascript修改标签样式

【讨论】：

如何使用php在我的页面中注入动态css 先生？？请帮助
例如：#css { 背景：; }
先生，是否可以在 stylesheet.css 中添加一些 php 代码？

【解决方案7】：

除了切换到全新的样式表或覆盖它之外，您无法真正更改 css。 Wat 可能是最简单的方法是这样的：(JavaScript)

document.getElementById('idOfObject').backgroundColor = "#fff";

有关类似问题，另请参阅此页面：http://www.kirupa.com/html5/changing_css_using_javascript.htm

【讨论】：