在运行时更改CSS规则

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

运行期间

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

然后，#mycss应该是：

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

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

对不起你们，我真的很新的HTML世界......

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

来源

2011-08-09 php_newbie

什么时候是'运行时'？你想在有人点击按钮时执行该操作，或者出于某种原因在“运行时”期间立即更改该操作？ – DMan

运行时什么？当你的应用程序加载，什么服务器端应用程序？ – JonH

在运行时什么？ – ppumkin

你可以改变它的任何下列方式：

在页面
添加样式声明元素
使用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());    
});

来源

2011-08-09 15:48:42

@php_newbie - 我在答案的底部添加了一个区域，以及一个示例。让我知道这是否符合您的需求。 –

优秀!!干杯。你明白了:-)感谢里约爵士。 –

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

来源

2011-08-09 15:49:08

是的，像这样的先生，请原谅我对这件事情无知:-) –

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

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

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

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

来源

2011-08-09 15:49:12 tybro0103

您有几种选择：

使用PHP在你的页面注入动态CSS
修改标签的风格与JavaScript

来源

2011-08-09 15:49:31

我如何使用PHP注入动态CSS在我的页面先生??请帮助 –

例如：#css {background：<？ echo $ myDynamicCssValue; ？>; } –

先生，是否可以在stylesheet.css中添加一些php代码？ –

你无法去改变其他的CSS比切换到一个全新的样式表或覆盖它。笏可能是最简单的方法是这样的：（JavaScript的）

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

参见本页面类似的问题：http://www.kirupa.com/html5/changing_css_using_javascript.htm

来源

2011-08-09 15:50:47 jeppeb

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

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

来源

2011-08-09 15:51:33

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

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

如果我将在这个CSS下一个选择改变（无论是什么[CTR-面板〜= “键”]装置）：

[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。

来源

2017-07-20 09:38:20

在运行时更改CSS规则

回答

相关问题