css - 设置另一个时修改 CSS 规则

Question

我的代码设置为通过选项(简单的隐藏/显示、边栏的左/右位置)更改网站布局，使用 Wordpress 定制器。

$wp_customize->add_setting(
        'sidebar_display',
        array(
            'default'      => '',
            'section'      => 'layout',
            'sanitize_callback' => 'sanitize_layout'
        )
    );
$wp_customize->add_control('sidebar_display', array(
  'label'      => __('Sidebar Display', ' '),
  'section'    => 'layout',
  'settings'   => 'sidebar_display',
  'type'       => 'radio',
  'choices'    => array(
    'inline-block'   => 'Display',
    'none'  => 'Hide',
  ),
));

CSS

#sidebar-primary {display:  <?php echo $sidebar_display; ?>;}

由于主要内容(不在侧边栏中)的图像会在显示或不显示侧边栏时更改其尺寸，所以我对此有疑问。 我正在寻找一种修改 css 规则 width: 的方法，它会说“如果侧边栏是 display:inline-block，.element img {width:76%}, else .element img{width:100%}"

我做了一些研究，我相信我可以用 LESS(？)实现这一点，但是还有其他方法吗？ 我很乐意就我的问题提出任何建议!

Answer 1

由于 CSS 不能处理这样的条件，所以用普通 CSS 是不可能做到的。

JavaScript 似乎是您的正确选择。

如果你使用 jQuery 一个非常强大的 JavaScript 框架 jQuery，这真的很容易。 代码应如下所示:

var display = $("#sidebar").css("display");

var percentage;

if(display == "inline-block"){
  
  percentage = "76%";
  
}
else{
  
  percentage = "100%";
  
}
$("#result").css("width",percentage);
$("#result").html("This one is "+percentage);

#sidebar{
  
  display: inline-block;
    
}

#result{
  
  height: 50px;
  background-color: red;
  
}


#compare{
  
  height: 50px;
  width: 100%;
  background-color: green;
  
}

<!-- This is the jQuery framework -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="sidebar"></div>

<div id="compare">This one is 100%</div>
<div id="result"></div>