gpt4 book ai didi

javascript - 如何将样式表元素的值分配给变量?

转载 作者:太空宇宙 更新时间:2023-11-03 23:42:57 26 4
gpt4 key购买 nike

我尝试过在单击链接时调整 DIV 的大小,但我确实需要将值分配给变量,之后我可以更改值......最终有 [+] 和 [-] 按钮允许用户一次增加和减少 1 个像素的大小。

目前我只是想让“framewidth”获取样式表宽度的值,然后在屏幕上打印该值……一旦我知道我有这个值,我就可以使用它了。

我已经阅读了数十篇文章并为此花费了 10 多个小时,这就是我到目前为止的全部......

(我讨厌成为一个菜鸟哈哈)

“调整大小.php”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" href="resize.css" type="text/css"/>
<title>Resize</title>
</head>

<body>

<script type="text/javascript">
function frame700()
{
var framewidth=document.getElementById('frame').style.width.value;
document.getElementById('frame').style.width='700px';
document.getElementById("info").innerHTML=framewidth;
}

function frame500()
{
document.getElementById('frame').style.width='500px';
}
</script>

<div class="resize" ID="frame" style="width:500px">
<table>
<tr>
<td>
<a href="#" onclick="frame700()">700</a> <a href="#" onclick="frame500()">500</a><br/>
</td>
</tr>
<tr>
<td id="info"></td>
</tr>
</table>

</div>

</body>
</html>

“调整大小.css”

div.resize
{
position:absolute;
height:100px;
background-color:#ffc080;
border:2px solid orange;
}

最佳答案

.style.width 将为您提供元素的宽度,它没有 .value 属性。

应该是

var framewidth = document.getElementById('frame').style.width;

演示:Fiddle


您可能还想看看 window.getComputedStyle()

function frame700() {
var el = document.getElementById('frame'),
style = window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle || {};
var framewidth = style.width;
document.getElementById('frame').style.width = '700px';
document.getElementById("info").innerHTML = framewidth;
}

演示:Fiddle

关于javascript - 如何将样式表元素的值分配给变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22365573/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com