如何設置元素的寬度等於窗口寬度的一半

Question

我試圖用floor功能自動生成四捨五入的值，但它保持靜態。你能幫我提高我的代碼嗎？非常感謝你。

的jQuery：

$(document).ready(function() { 

    width_split = $(document).width(); 
    width_split = Math.floor(width_split/2); 

    $(document).resize(function() { 
     width_split = $(document).width(); 
     width_split = Math.floor(width_split/2); 
    }); 

}); 

HTML：

<p style="position:absolute; right:"+width_split+"px;"> 
    .content 
</p> 

Answer 1

你必須設置right值的JS裏面不是在HTML DOM

嘗試：

HTML：

個

<p id="mypar" style="position:absolute;"> 
    .content 
</p> 

JS：

$(document).ready(function(){ 

    width_split = $(document).width(); 
    width_split = Math.floor(width_split/2); 
$(document).resize(function(){ 
    width_split = $(document).width(); 
    width_split = Math.floor(width_split/2); 
    $('#mypar').css("right", width_split+'px');//ADD THIS 
}); 

$('#mypar').css("right", width_split+'px');//ADD THIS 
}); 

DEMO

Answer 2

應用width_split通過jQuery的<p>標籤，你在在線appying width_split方式p標籤是錯誤的。喜歡的東西應該是

的Html

<p id="para" style="position:absolute"; > 
     .content 
    </p> 

JS

$("#para").css("right", width_split + "px"); 

，而不是

<p style="position:absolute; right:"+width_split+"px;"> 
///--------------------------this is wrong---^ 

Answer 3

你也應該更新HTML標籤

$('pID').css('right', width_split.toString()+'px'); 

在document.resize函數中。

Answer 4

比較簡單的解決

選擇要調整和應用樣式直接

$('.your-selector').css({theProperty: halfWidth}); 

每個元素，但這樣一來，你必須修改爲您添加到HTML每一個新元素的JS。

一種通用的方法是

將一個標記上「反應」對象（MRK）類，並在標記還包括要設置爲寬/ 2（例如，MRK-左側的CSS屬性，或MRK-margin-left）

然後在窗口調整大小後，搜索包含標記的元素，提取css屬性並將其設置在其上。

DEMO fiddle

$(window).on('resize', function() { 
    var halfWidth = $(window).width()/2; 
    $('*[class*=MRK-]').each(function(){ // selects all elements having a class 
     var cls = $(this).attr('class') // property that contains MRK 
     var cssPropName = /MRK-([\w-]+)/.exec(cls)[1]; // extracts the info MRK 
     var css = {}; 
     css[cssPropName] = halfWidth; // creates the styleobject with the info 
     $(this).css(css); 
    }); 
}); 

在HTML中你可以這樣寫：

<div class="MRK-left"></div> 

或

<p class="MRK-margin-left"></p> 

在800像素寬度的結果將是：

<div class="MRK-left" style="left: 400px"></div> 

或

<p class="MRK-margin-left" style="margin-left: 400px"></div> 

你可以像這樣的任何屬性更改，恕不改變JS邏輯