修改CSS規則時，設置另一個

我的代碼被設置爲通過選項（簡單的隱藏/顯示，側邊欄的左/右位置），使用Wordpress定製器更改站點的佈局。修改CSS規則時，設置另一個

$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%}，否則.element img{width:100%}」

我做了一些研究，我相信我可以用更少做到這一點（？），但有沒有其他方法可以做到這一點？我很樂意就我的問題提供任何建議！

來源

2015-12-17 dbsso

使用JavaScript！順便說一句如何顯示邊欄JavaScript或頁面加載？ – deepakb

如何定義側邊欄是否顯示？ '@media queries'或類似的東西？你不需要JavaScript來解決這個問題 – Martin

顯示你的代碼，我們可以幫助你。關於LESS，它不能僅僅是CSS，它只是一種編譯成CSS的樣式表語言。 – LGSon

由於CSS無法處理這樣的條件，所以不可能用純CSS做到這一點。

JavaScript似乎是您的正確選擇。

如果您使用jQuery這個非常強大的JavaScript框架jQuery，那真的很容易。代碼應該looke是這樣的：

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>

來源

2015-12-17 13:51:54

修改CSS規則時，設置另一個

回答

相關問題