使用php或JQuery编辑css

是否有一种方法可以从html表单、php和/或JQuery更改css样式表的数据。所以如果我有以下几点

宽度

#main #section1 { 
width: 25%;
}
#main #section2 { 
width: 50%;
}
#main #section3 { 
width: 25%;
}

所以我想有3个文本框S1、S2和S3，然后用户可以在每个文本框中输入值。它将检查它们的总和是否为100%或更少，然后将它们写入css，以代替25%、50%和25%。如何使用php和/或JQuery实现这一点

---

谢谢

一些基本但应该有用的东西

$(".validate").click(function(){
      //I've assumed your text inputs were children of an element with id section$i 
      var w1 = Number($("#section1 input").val());
      var w2 = Number($("#section2 input").val());
      var w3 = Number($("#section3 input").val());
      if(w1+w2+w3 == 100){
           //here you change css rules for #section$i elements
           $("#section1").css("width",w1+"%")
           $("#section2").css("width",w2+"%")
           $("#section3").css("width",w3+"%")
      }
      else{
           alert("sum of values must equals 100%")
      }
});

---

假设你有一个可点击的区域，里面有类

validate

那么有一个肮脏的解决方案。可能在body标记结束后，使用php将javascript写入html。 代码是这样的

..
...
</body>
<?php echo <<< code
<script type="text/javascript">
document.getElementById("section1").style.width="$_POST['s1']";
// and then for each section u can do this
code;
?>

。。
...
您必须在页面上动态设置CSS。一旦用户输入了数据，您就可以使用少量AJAX来更改样式。下面的内容将是页面上的PHP和样式。如果您希望这是永久性的更改，请确保根据用户的配置文件将设置放在DB中。这也可以添加到AJAX脚本中

<style type="text/css">
#main #section1 { 
  width: <?php echo $s1; ?>%;
}

#main #section2 { 
  width: <?php echo $s2; ?>%;
}

#main #section3 { 
  width: <?php echo $s3; ?>%;
}

</style>


#主要#第1节{
宽度：%；
}
#主要#第2节{
宽度：%；
}
#主要#第3节{
宽度：%；
}

HTH
您可以使用jQuery
addClass（）
添加具有所需样式的特定CSS类

要使用PHP，可以在页面内部使用CSS：

<style type="text/css">
<?php echo "width: 100px;" //for example ?>
</style>



但我不一定推荐这样做。
您可以使用我刚刚为您制作的脚本：

var merge = function(objectCollections){
    var array = new Array();
    foreach(objectCollections,function(objectCollection){
    foreach(objectCollection,function(object){
        array.push(object);
    });
    });
    return array;
}
var foreach = function(object,loop){
    for (var key in object) {
    if (object.hasOwnProperty(key)) {
        loop(object[key],key);
    }
    }
}
var changeCSS =function(value){
    var links = document.getElementsByTagName('link');
    var styles = document.getElementsByTagName('style');
    var sheets = merge([links,styles]);
    var rules = value.split(/[(\ *{)(\})]/g);

    for(var i in sheets){
    if(typeof sheets[i] == 'object'){
        var sheet = sheets[i].sheet ? sheets[i].sheet : sheets[i].styleSheet;
        for(var j in sheet.cssRules){
        if(typeof sheet.cssRules[j].selectorText != 'undefined'){
            if(sheet.cssRules[j].selectorText == rules[0]){
            sheet.cssRules[j].cssText = value;
            console.debug(sheet.cssRules[j].cssText);
            }
        }
        }
    }
    }
}

用法示例：

changeCSS('#main #section1 {width: 25%;}');

这将更改css（而不是在标记或其他内容上设置样式）
您将无法使用jQuery，因为它基于运行客户端的JavaScript，无法更改服务器上的文件。@Dan Diplo:您可以使用JavaScript或jQuery。只需使用javascript在客户端检查文本框值，并相应地应用HTECSS。它更干净、更容易，所以基本上你是在尝试制作一个用户可配置的界面？这不是什么新鲜事……这里有一个更好的实现：请解释如何使用它？将它放在您的文档中。ready JQuery function（）并更正我为匹配您的标记所做的操作，或通过编辑问题来显示您的标记，然后我们可以提供确切的脚本这是对css的永久性编辑还是在我刷新/关闭浏览器时它会改变？这不是永久性的改变，因为它是在客户端（在浏览器中）完成的。这是一个发生在页面中的更改，如果您决定刷新，该更改将在刷新时消失。您还可以将这些值发送到服务器，服务器可以存储这些值，并在下一次连接时重新发送。有两种可能使它们持久化。如果您希望将它们存储在每个用户的基础上，您可以将它们存储在cookie客户端或数据库服务器端请详细解释。你能写代码吗？这很简单，它的作用是；查找所有样式表，并查找作为参数的选择器（“main#section1”），例如，它将充当css属性文件（因为它是一个）。换句话说，参数是css代码：changeCSS（“#main#section1{width:25%；}”）；除非你把它放在一个js cookie中，但是直到pagereload所有元素的选择器都会改变，所以我必须走数据库路线，因为我需要它是永久的。谢谢