在运行时更改 CSS 规则

Question

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

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

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

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

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

对不起，大家，我对 HTML 世界真的很陌生......

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

Answer 1

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

• 在页面中添加样式声明
• 在元素上添加内联样式声明
• 使用 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 来完成，如果您想要该解决方案，请告诉我，这是一个演示。

输入任意颜色并更改背景（红色、#F7F6F5、紫色、#999 等）

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