DEMO fiddle

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

您必须在JS中设置right值，而不是在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

通过jquery为width_split标记应用<p>，您在内联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的css属性（例如，MRK-left，或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>

800px宽度的结果将是：

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

或

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

你可以在不改变js逻辑的情况下改变任何属性

如何设置元素的宽度等于窗口宽度的一半

4 个答案:

更简单的解决方案

通用方法是

DEMO fiddle