将元素宽度从px更改为%

时间:2014-11-08 09:31:59

标签: javascript jquery

正如标题中所提到的,我希望在jQuery中将元素宽度从px更改为%。

我该怎么办?

1 个答案:

答案 0 :(得分:0)

这更像是一个数学问题:

  

元素宽度(px)/容器宽度(px)* 100 =元素宽度(%)

假设你有一个20px宽的元素,在40px宽的容器中:

  

20/40 * 100 = 50

表示该元素的50%等于20px。

因此,接受jQuery元素/对象作为参数的简单函数将是:

function convert($e) {
    var newWidth = parseInt($e.css('width'), 10) /  parseInt($e.parent().css('width'), 10) * 100;
    $e.css('width', newWidth + '%');
}

您可能希望对此进行扩展,以便您也可以传入父元素(如果直接父元素不是相对引用元素)。


点击转换按钮后,您会看到从px到%的宽度变化:



function convert($e) {
    var newWidth = parseInt($e.css('width'), 10) /  parseInt($e.parent().css('width'), 10) * 100;
    $e.css('width', newWidth + '%');
}

div{
  height: 50px;
}

#c {
  width: 40px;
}

#a {
  width: 20px;
  border: 1px solid green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="c">
  <div id="a"></div>
</div>
<button onclick="convert($('#a'))">Convert</button>
&#13;
&#13;
&#13;