在运行时更改CSS规则 [英] Change CSS rule at runtime

问题描述

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

How do I change any CSS properties during runtime?
Suppose I have:

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

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

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

------------------------ * * EDIT * ** -------------------------------- -----------

------------------------**EDIT***-------------------------------------------

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

Im sorry guys, I'm really new to the HTML world...

我的问题是什么，我想创建一段代码来改变当前CSS属性，只需在输入框(例如color: #fff或white)上放置一个值，然后点击该按钮，它将把当前CSS背景颜色从默认颜色(#000)更改为用户定义的颜色(例如#fff).

My problem or question, whatever that is, I would like to create a piece of code that would change current CSS properties by simply putting a value on the input box (e.g. color: #fff or white) and when I hit the button, it would change the current CSS background color from the default color (#000) to user-defined color (e.g. #fff).

推荐答案

您可以通过以下任意一种方式对其进行更改:

You could change it any of the following ways:

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

其他样式解决方案:

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

内嵌样式解决方案:

使用id='mycss'

jQuery解决方案(显然要求您包括 jQuery ):

jQuery Solution (obviously requires you to include jQuery):

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

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

使用jQuery-我相信我已经实现了您在编辑中寻找的功能.也可以使用纯JavaScript来完成，请告诉我您是否想要该解决方案，这里是一个演示.

Using jQuery - I believe I achieved the functionality you were looking for in your edit. It could be accomplished in pure javascript as well, just let me know if you would like that solution, here is a demo.

键入任何颜色并更改背景(红色，#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());               
});

这篇关于在运行时更改CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！