更改 css 文件中的 div 样式答案

【问题标题】：To change the div style in css file更改 css 文件中的 div 样式
【发布时间】：2013-02-28 18:25:29
【问题描述】：

我想在我的插件中使用背景图像更改背景颜色。在 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 文件。在 Jquery 或 Javascript 中完成
做不到，至少用 PHP 做不到。 PHP 是服务器端，您需要发生的事情需要发生在客户端事件上。

标签： javascript jquery css wordpress

【解决方案1】：

你可以把元素换成另一个类，换css文件确实不是一个好选择，经验之谈...

【讨论】：

【解决方案2】：

您可以直接使用wp_head 钩子在您的文档<head> 中注入样式。

function print_styles(){
echo '<style>';
#write PHP code to display your styles here
echo '</style>';
}

add_action('wp_head', 'print_styles');

【讨论】：

【解决方案3】：

创建一个具有 css 结构的 php 文件，您将从服务器更新该文件并将其导入您的 style.css 并使用@import 'css/style.css.php?c=1';

您的 php 文件应如下所示：

<?php

header('Content-Type: text/css');

.wrap_div {
 echo $styles'
}
?>

【讨论】：

另外，OptionTree 插件有一些功能可以直接更新你的 css 文件，但它可能会在你每次保存选项时重写整个文件

【解决方案4】：

更新你的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');
  }

【讨论】：

只改变背景：#9CF;带有背景图像：url（./images/back2.png）；对于那个 div.what to do?
$("#your_div").css("background", "url('images/back2.png')");

【解决方案5】：

您想使用以下代码。

<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 样式。

【讨论】：

【解决方案6】：

通过使用 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>

【讨论】：