How do I assign the value of a stylesheet element to a variable?

StackOverflow https://stackoverflow.com/questions/22365573

سؤال

I have played about with resizing a DIV when clicking a link, but I really need to assign the value to a variable, after which i can change the value ... ultimately having [+] and [-] buttons to allow the user to increase and decrease the size 1 pixel at a time.

at the moment all i am just trying to make "framewidth" pick up the value of the stylesheet width and then print the value on the screen ... once i know i have this value i can play with it.

i have read dozens of articles and spent over 10 hours on this and this is all i have so far ...

(i hate being a noob lol)

"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;
}
هل كانت مفيدة؟

المحلول

.style.width will give you the width of the element, there is no .value property for it.

it should be

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

Demo: Fiddle

You might also want to have a look at 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;
}

Demo: Fiddle

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top