Javascript 更改css文件中的div样式
我想用插件中的背景图像更改背景颜色。在wordpress中选择单选按钮时。当更改div的颜色时，它应该更新css文件 我想更新一下Javascript 更改css文件中的div样式,javascript,jquery,css,wordpress,Javascript,Jquery,Css,Wordpress,我想用插件中的背景图像更改背景颜色。在wordpress中选择单选按钮时。当更改div的颜色时，它应该更新css文件 我想更新一下 .wrap_div{ background:#9CF; float: left; width: 584px; } div样式与下面的样式相同 .wrap_div{ float: left; width: 584px; background-imag
.wrap_div{
background:#9CF;
float: left;
width: 584px;
}
.wrap_div{
float: left;
width: 584px;
background-image:url(./images/back2.png);
}
如何在css文件中进行更改。感谢您的帮助。wrap_div是一个用户端div。我在管理端使用此代码，我希望更改应该出现在用户端。您可以将元素更改为另一个类，更改css文件确实不是一个好选项，根据经验…您可以直接使用钩子将样式注入文档中
函数打印样式（）{
回声'；
#在这里编写PHP代码以显示您的样式
回声'；
}
添加打印动作（“打印头”、“打印样式”）；
@import'css/style.css.php？c=1'将其导入到您的style.css中
您的php文件应如下所示：
<?php
header('Content-Type: text/css');
.wrap_div {
echo $styles'
}
?>
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}
</style>
<script type="text/javascript">
function changeColor(color) {
document.getElementById("wrap_div").setAttribute("class", color.value);
}
</script>
<div id="wrap_div">
Red <input type="radio" value="red" name="color" onClick="changeColor(this);"><br>
Blue <input type="radio" value="blue" name="color" onClick="changeColor(this);"><br>
Green <input type="radio" value="green" name="color" onClick="changeColor(this);">
</div>
</body>
</html>
通过以下方式更新css文件
.wrap_div_radio_change{
margin:0 auto;
width:410px;
height:460px;
background-image:url(./images/back2.png);
clear:both;
border:#000000 solid 1px;
}
然后使用这个脚本
if($('#radio_button').is(':checked')) {//Id of you radio button
$("#your_div").removeClass('wrap_div');//Id of the div which has the color to change Which will remove the initial clas of the div and the next line add a new class to the div
$("#your_div").addClass('wrap_div_radio_change');
}
通过使用JavaScript，您可以尝试以下操作：
<?php
header('Content-Type: text/css');
.wrap_div {
echo $styles'
}
?>
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.green{
background-color:green;
}
</style>
<script type="text/javascript">
function changeColor(color) {
document.getElementById("wrap_div").setAttribute("class", color.value);
}
</script>
<div id="wrap_div">
Red <input type="radio" value="red" name="color" onClick="changeColor(this);"><br>
Blue <input type="radio" value="blue" name="color" onClick="changeColor(this);"><br>
Green <input type="radio" value="green" name="color" onClick="changeColor(this);">
</div>
</body>
</html>
瑞德先生{
背景色：红色；
}
蓝先生{
背景颜色：蓝色；
}
格林先生{
背景颜色：绿色；
}
功能更改颜色（颜色）{
document.getElementById（“wrap_div”）.setAttribute（“class”，color.value）；
}
红色
蓝色
绿色
您想使用以下代码
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('input:radio[name="radioname"]').change(function(){
jQuery('.wrap_div').css('background','');
jQuery('.wrap_div').css('background-image','url(./images/back2.png)');
});
});
</script>
jQuery（文档）.ready（函数（）{
jQuery（'input:radio[name=“radioname”]'）。更改（函数（）{
jQuery（'.wrap_div'）.css（'background'，''）；
jQuery（'.wrap_div'）.css（'background-image'，'url（./images/back2.png）'）；
});
});
还可以使用.css添加其他类似的css样式。您无法动态更新css文件。在Jquery或JavaScriptor中实现这一点是不可能的，至少用PHP是不行的。PHP是服务器端，您需要在客户端事件上执行。此外，OptionTree插件有一些功能可以直接更新您的css文件，但它可能会在每次保存选项时重写整个文件以仅更改背景：#9CF；带背景图片：url（./images/back2.png）；对于那个div.what-do？$（“your#div”）.css（“background”，“url（'images/back2.png'））；