[英]How do I assign the value of a stylesheet element to a variable?
單擊鏈接時,我一直在調整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;
}
.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;
}
演示: 小提琴
最終工作的原始版本...
“ 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.