如何将样式表元素的值分配给变量？

Question

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

目前，我只是想使“ framewidth”获得样式表宽度的值，然后在屏幕上打印该值...一旦我知道我有此值，我就可以使用它。

我已经阅读了数十篇文章，并在此上花费了超过10个小时，而这就是我到目前为止所拥有的一切...

（我讨厌成为菜鸟）

“ resize.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>

“ resize.css”

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

Answer 1

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

它应该是

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

演示：小提琴

您可能还想看看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;
}

演示：小提琴

Answer 2

最终工作的原始版本...

“ resize.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 widthD()
 {
  var el = document.getElementById('frame'), style = window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle || {};
  var frameWpx = style.width;
  var frameW=parseInt(frameWpx);
  frameW=frameW-1;
  frameWpx=frameW+"px";
  document.getElementById('frame').style.width = frameWpx;
 }

function widthU()
 {
  var el = document.getElementById('frame'), style = window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle || {};
  var frameWpx = style.width;
  var frameW=parseInt(frameWpx);
  frameW=frameW+1;
  frameWpx=frameW+"px";
  document.getElementById('frame').style.width = frameWpx;
 }

function heightD()
 {
  var el = document.getElementById('frame'), style = window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle || {};
  var frameHpx = style.height;
  var frameH=parseInt(frameHpx);
  frameH=frameH-1;
  frameHpx=frameH+"px";
  document.getElementById('frame').style.height = frameHpx;
 }

function heightU()
 {
  var el = document.getElementById('frame'), style = window.getComputedStyle ? window.getComputedStyle(el) : el.currentStyle || {};
  var frameHpx = style.height;
  var frameH=parseInt(frameHpx);
  frameH=frameH+1;
  frameHpx=frameH+"px";
  document.getElementById('frame').style.height = frameHpx;
 }

</script>

<div class="resize" ID="frame"> 
 <table>
 <tr>
  <td></td>
  <td><a href="#" onclick="heightD()">D</a></td>
  <td></td>
 </tr>
 <tr>
  <td><a href="#" onclick="widthD()">D</a></td>
  <td id="info"></td>
  <td><a href="#" onclick="widthU()">U</a></td>
 </tr>
 <tr>
  <td></td>
  <td><a href="#" onclick="heightU()">U</a></td>
  <td></td>
 </tr>
</table> 

</div>

</body>
</html>

“ resize.css”

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

谢谢你阿伦·P·约翰尼https://stackoverflow.com/users/114251/arun-p-johny

如何将样式表元素的值分配给变量？

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-03-12 22:54:25

解决方案2
0 2014-03-13 04:10:26

如何将样式表元素的值分配给变量？

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-03-12 22:54:25

解决方案2 0 2014-03-13 04:10:26

解决方案1
3 已采纳 2014-03-12 22:54:25

解决方案2
0 2014-03-13 04:10:26