Question

有没有办法可以从html表单和php和/或JQuery更改css样式表的数据。如果我有以下

widths.css

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

所以我希望有3个文本框S1，S2和S3，然后用户可以将值放入每个文本框中。它会检查它们加起来是否为100％或更少，然后它会将它们写入css而不是25％，50％和25％。我如何使用php和/或JQuery实现这一目标。

由于

Answer 1

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

$(".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

Answer 2

好吧，有一个肮脏但解决方案。使用php在body标签结束后可能将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;
?>

Answer 3

你必须在它自己的页面上动态设置CSS。用户输入数据后，您可以使用一点点AJAX来更改样式。所以下面的内容就是你的PHP和页面样式。如果您希望这是一个永久性的更改，请确保将设置放在数据库中，以防止用户的配置文件。这也可以添加到您的AJAX脚本中。

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

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

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

</style>

HTH

Answer 4

您可以使用jQuery addClass()添加具有所需样式的特定CSS类。

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

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

但我不一定会推荐。

Answer 5

您可以使用我刚刚为您制作的脚本：

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（不在标签或其他东西上设置样式）

用php或JQuery编辑css

5 个答案: