正如标题中所提到的,我希望在jQuery中将元素宽度从px更改为%。
我该怎么办?
答案 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;