使用php或jQuery编辑css

有没有一种方法可以从html表单和php和/或JQuery中更改css样式表的数据。所以，如果我有以下使用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来实现这一点。

感谢

来源

2011-05-20 Michael

您将无法使用jQuery，因为它基于运行客户端并且无法更改服务器上的文件的JavaScript。 – 2011-05-20 13:26:27

@ Dan Diplo：你可以使用javascript或jquery。只需用javascript检查客户端的文本框值，然后相应地应用hte css。它更干净，更容易 – lovesh 2011-05-20 13:36:42

因此，基本上你正在试图建立一个用户可配置的界面？这不是什么新东西....这是一个更好的实现：http://layout.jquery-dev.net/demos.cfm – bpeterson76 2011-05-20 14:59:14

一些基本的东西，但它应该工作

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

来源

2011-05-20 13:33:00 Grooveek

请解释如何使用它？ – Michael 2011-05-20 21:14:35

把这个放在你的document.ready JQuery函数（）中，并纠正我所做的匹配你的标记或者通过编辑问题来显示你的标记，然后我们可以提供确切的脚本 – Grooveek 2011-05-21 11:06:37

这是一个永久编辑的CSS或当我刷新/关闭浏览器时它会改变吗？ – Michael 2011-05-21 21:03:36

一个可点击的区域也有一个肮脏的，但解决这个。使用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; 
?>

来源

2011-05-20 13:33:35 lovesh

你必须动态地设置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

来源

2011-05-20 13:34:59 Chin

请详细解释。你能否写下代码 – Michael 2011-05-20 22:18:52

您可以使用jQuery的addClass()添加特定CSS类与您所需要的风格。

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

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

但我不一定会推荐。

来源

2011-05-20 13:35:01 kaese

你可以使用这个脚本，我只是做给你：

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（未设置的样式在标签或某事）

来源

2011-05-20 14:49:30

我该如何使用它？ – Michael 2011-05-20 21:14:04

其简单，它所做的是;找到你所有的无风格表单，并寻找你拥有的选择器作为参数（例如“#main＃section1”），例如这将作为一个css attrebute（它是一个）。换句话说，参数是CSS代码： changeCSS（'＃main＃section1 {width：25％;}'）; – 2011-05-20 22:24:18

这是否永久改变百分比？ – Michael 2011-05-20 22:46:45

使用php或jQuery编辑css

回答

相关问题