Question

我想在插件中使用背景图片更改背景颜色。在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。我在管理端使用此代码，我希望更改应该出现在用户端。

Answer 1

您可以将元素更改为另一个类，更改css文件实际上不是一个好的选择，从经验来讲......

Answer 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');

Answer 3

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

将其导入style.css中

你的php文件应如下所示：

<?php

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

.wrap_div {
 echo $styles'
}
?>

Answer 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');
  }

Answer 5

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

Answer 6

您想使用以下代码。

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

在css文件中更改div样式

6 个答案: