我想在我的插件中使用背景图像更改背景颜色。在 wordpress 中选择单选按钮时。更改 div 的颜色时，它应该更新 css 文件。
我要更新
.wrap_div{
background:#9CF;
float: left;
width: 584px;
}
div 样式与下面的样式。
.wrap_div{
float: left;
width: 584px;
background-image:url(./images/back2.png);
}
如何更改我的 css 文件。任何帮助表示赞赏。wrap_div 是用户端 div。我在管理端使用此代码，我希望更改应该出现在用户端。
您可以将元素更改为另一个类，更改css文件确实不是一个好的选择，从经验中讲......
您可以使用钩子<head>直接在文档中注入样式。wp_head
function print_styles(){
echo '<style>';
#write PHP code to display your styles here
echo '</style>';
}
add_action('wp_head', 'print_styles');
创建一个具有 css 结构的 php 文件，您将从服务器更新该文件并将其导入您的 style.css@import 'css/style.css.php?c=1';
您的 php 文件应如下所示：
<?php
header('Content-Type: text/css');
.wrap_div {
echo $styles'
}
?>
更新你的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，你可以尝试这样的事情：
<!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>
您想使用以下代码。
<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>
还可以使用 .css 添加其他类似的 CSS 样式。