Question

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

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

然后在运行时，#mycss应为：

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

------------------------的 * * 修改 * ** -------------------------------- -----------

对不起，伙计们，我是HTML世界的新手......

我的问题或问题，无论是什么，我想创建一段代码，通过简单地在输入框上添加一个值来改变当前的CSS属性（例如color: #fff或white）当我点击按钮时，它会将当前的CSS背景颜色从默认颜色（#000）更改为用户定义的颜色（例如#fff）。

Answer 1

将jQuery添加到您的页面。然后：

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

查找.css（）方法的文档。

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

Answer 2

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

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

其他样式解决方案：

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

内联样式解决方案：

使用style='background: #fff; padding: 10px'

将以下id='mycss'添加到您的元素中

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

Answer 3

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

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

Answer 4

首先，网站没有runtime。如果我猜对了，你想在将JS发送到客户端后操纵它，而且只能使用JavaScript。

Answer 5

您有多种选择：

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

Answer 6

除了切换到全新的样式表或覆盖它之外，你无法真正改变css。 Wat可能是最简单的方法：（JavaScript）

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

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

Answer 7

首先， CSS 应插入＆＃34;标题为＆＃34;链接：

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

如果我要改变这个CSS下一个选择器（无论 [ctr-panel~ =＆＃34;按钮＆＃34;] 意味着）：

[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 可能是另一种逻辑。

在运行时更改CSS规则

7 个答案: