动态更改CSS图层尺寸？ [英] Dynamically Change CSS layer dimensions?
问题描述
我对javascript了解不多，所以请放轻松。有没有办法
动态地动态更改CSS图层尺寸。这就是我要做的b $ b。我有一堆缩略图，点击后会打开CSS层中的完整视图，而不是弹出窗口。我之前有过这个
，但每张图片都有一层，正如你想象的那样，
标记过于臃肿。所以我可以随时更改css图层
尺寸。重要的是要精确确定图层的大小
，因为图像周围有内容，比如关闭按钮
隐藏图层。
I don''t know much about javascript, so take it easy on me. Is there a way to
dynamically change a CSS layers dimensions on the fly. Here is what I''m
doing. I have a bunch of thumbnails that when clicked on, will open up the
full view in a CSS layer, as opposed to a pop-up window let''s say. I had
this before, but with one layer for each image, and as you might imagine,
the markup was way too bloated. So can I just change the css layers
dimensions on the fly. It is important that the layer be sized precisely
because, there is content surrounding the image, like a close button that
hides the layer.
推荐答案
" TheKeith" < no@spam.com>写道：
"TheKeith" <no@spam.com> writes:
我对javascript了解不多，所以请放轻松。有没有办法动态地动态更改CSS图层尺寸。
我想*我知道你在说什么。然而，词语层是指层。
被用于几种不同的含义，所以当你想要精确到
时应该避免。
你是什么可能是绝对定位的块元素。
您可以通过设置CSS属性width
和height来更改其尺寸。 br />
var elem = document.getElementById（" divId"）;
elem.style.width =" 200px";
elem.style.height =" 300px"
重要的是要精确调整图层的大小，因为图像周围有内容，例如隐藏层。
I don''t know much about javascript, so take it easy on me. Is there a way to
dynamically change a CSS layers dimensions on the fly.
I *think* I know what you are talking about. However, the word "layer" is
being used with several different meanings, so it should be avoided when
you want to be precise.
What you have is probably an absolutely positioned block element.
You can change its dimensions by setting the CSS properties "width"
and "height".
var elem = document.getElementById("divId");
elem.style.width = "200px";
elem.style.height = "300px"
It is important that the layer be sized precisely because, there is
content surrounding the image, like a close button that hides the
layer.
你必须找到你需要的尺寸。
/ L
-
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML死亡颜色：< URL：http：//www.infimum.dk/HTML/rasterTriangleDOM.html>
''Faith witho判决只会降低神灵的精神。''
You''ll have to find the size you need then.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
''Faith without judgement merely degrades the spirit divine.''
" Lasse Reichstein Nielsen" < lr*@hotpop.com>在消息中写道
news：oe ********** @ hotpop.com ...
"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:oe**********@hotpop.com...
" TheKeith" < no@spam.com>写道：
"TheKeith" <no@spam.com> writes:
我对javascript了解不多，所以请放轻松。是否有动态更改CSS图层尺寸的
方法。
I don''t know much about javascript, so take it easy on me. Is there a way to dynamically change a CSS layers dimensions on the fly.
我想*我知道你在说什么。然而，词语层是指层。
使用时有几种不同的含义，所以当你想要精确的时候应该避免它。
你所拥有的可能是绝对定位的块元素。
您可以通过设置CSS属性width
和height来更改其尺寸。
var elem = document.getElementById（" divId"）;
elem.style.width =" 200px";
elem.style.height =" 300px"
I *think* I know what you are talking about. However, the word "layer" is
being used with several different meanings, so it should be avoided when
you want to be precise.
What you have is probably an absolutely positioned block element.
You can change its dimensions by setting the CSS properties "width"
and "height".
var elem = document.getElementById("divId");
elem.style.width = "200px";
elem.style.height = "300px"
重要的是要精确调整图层的大小因为，图像周围有内容，比如隐藏
图层的关闭按钮。
It is important that the layer be sized precisely because, there is
content surrounding the image, like a close button that hides the
layer.
你必须找到你需要的尺寸然后。
You''ll have to find the size you need then.
非常感谢，我真的很感激。我正在尝试稍微修改你的代码
，以便它作为一个函数运行。我的javascript不是很好 - 你能不能用
a看看我得到了什么并告诉我出了什么问题？
< html>
< head>
< script type =" text / JavaScript">
<！ -
函数twohundredsquare（divid，divwidth，divheight）{
boxdimensions = getElementById（divid）;
boxdimensions.style.width = divwidth;
boxdimensions.style.height = divheight;
}
// - >
< / script>
< / head>
< body>
< a href =" javascript ：twohundredsquare（" blue"， 200px，200px）;">更改为200
x 200< / a>< br>
< div id ="蓝色"风格= QUOT;位置：绝对的;左：209px;顶部：89px;宽度：115px;
身高：95px;的z-index：1; background-color：＃0000FF; layer-background-color：
＃0000FF; border：1px none＃000000;">< / div>
< / body>
< / html>
基本上，链接应该通过调用该函数来改变div元素
的维度。任何帮助都会很棒 - 谢谢。
Thanks a lot I really appreciate it. I''m trying to modify your code a little
so that it works as a function. My javascript isn''t very good--can you take
a look at what I got and tell me what''s wrong?
<html>
<head>
<script type="text/JavaScript">
<!--
function twohundredsquare(divid,divwidth,divheight) {
boxdimensions = getElementById (divid);
boxdimensions.style.width = divwidth;
boxdimensions.style.height = divheight;
}
//-->
</script>
</head>
<body>
<a href="javascript:twohundredsquare("blue","200px"," 200px");">change to 200
x 200</a><br>
<div id="blue" style="position:absolute; left:209px; top:89px; width:115px;
height:95px; z-index:1; background-color: #0000FF; layer-background-color:
#0000FF; border: 1px none #000000;"></div>
</body>
</html>
Basically the link is supposed to change the dimensions of the div element
by calling on that function. Any help would be great--thanks.
" TheKeith" < no@spam.com>在消息中写道
news：9p ******************** @ giganews.com ...
"TheKeith" <no@spam.com> wrote in message
news:9p********************@giganews.com...
< br> Lasse Reichstein Nielsen" Lasse Reichstein Nielsen" < lr*@hotpop.com>在消息中写道
新闻：oe ********** @ hotpop.com ...
"Lasse Reichstein Nielsen" <lr*@hotpop.com> wrote in message
news:oe**********@hotpop.com...
" TheKeith" < no@spam.com>写道：
"TheKeith" <no@spam.com> writes:
我对javascript了解不多，所以请放轻松。有没有办法动态地动态改变CSS图层尺寸。
我想*我知道你在说什么。然而，词语层是指层。
被用于几种不同的含义，所以当你想要精确的时候应该避免它。
你所拥有的可能是绝对定位的块元素。
您可以通过设置CSS属性width
和height来更改其尺寸。
var elem = document.getElementById（" divId"）;
elem.style.width =" 200px";
elem.style.height =" 300px"
I don''t know much about javascript, so take it easy on me. Is there a way to dynamically change a CSS layers dimensions on the fly.
I *think* I know what you are talking about. However, the word "layer" is being used with several different meanings, so it should be avoided when
you want to be precise.
What you have is probably an absolutely positioned block element.
You can change its dimensions by setting the CSS properties "width"
and "height".
var elem = document.getElementById("divId");
elem.style.width = "200px";
elem.style.height = "300px"
重要的是要精确调整图层的大小因为，图像周围有内容，比如隐藏
图层的关闭按钮。
It is important that the layer be sized precisely because, there is
content surrounding the image, like a close button that hides the
layer.
你必须找到你需要的尺寸然后。
You''ll have to find the size you need then.
非常感谢，我真的很感激。我正在尝试修改你的代码
Thanks a lot I really appreciate it. I''m trying to modify your code a
，以便它作为一个函数运行。我的javascript不是很好 - 你可以看看我得到了什么并告诉我出了什么问题吗？
< html>
< head>
< script type =" text / JavaScript">
<！ -
函数twohundredsquare（divid，divwidth，divheight）{
boxdimensions = getElementById（ （）; - /> ;
< / head>
< body>
< a href =" javascript ：twohundredsquare（" blue"，" 200px"， 200px;;">更改为
200 x 200< / a>< br>
< div id =" blue"风格= QUOT;位置：绝对的;左：209px;顶部：89px;
宽度：115px;高度：95px;的z-index：1; background-color：＃0000FF; layer-background-color：
＃0000FF; border：1px none＃000000;">< / div>
< / body>
< / html>
基本上该链接应该更改div元素的尺寸
通过调用该函数。任何帮助都会很棒 - 谢谢。
little so that it works as a function. My javascript isn''t very good--can you
take a look at what I got and tell me what''s wrong?
<html>
<head>
<script type="text/JavaScript">
<!--
function twohundredsquare(divid,divwidth,divheight) {
boxdimensions = getElementById (divid);
boxdimensions.style.width = divwidth;
boxdimensions.style.height = divheight;
}
//-->
</script>
</head>
<body>
<a href="javascript:twohundredsquare("blue","200px"," 200px");">change to
200 x 200</a><br>
<div id="blue" style="position:absolute; left:209px; top:89px;
width:115px; height:95px; z-index:1; background-color: #0000FF; layer-background-color:
#0000FF; border: 1px none #000000;"></div>
</body>
</html>
Basically the link is supposed to change the dimensions of the div element
by calling on that function. Any help would be great--thanks.
没关系，我让它运转起来。这就是我做的：
< html>
< head>
< title> Untitled Document< / title>
< meta http-equiv =" Content-Type"含量=" text / html的; charset = iso-8859-1">
< script type =" text / JavaScript">
<！ -
function viewer_dimensions（divid，divwidth，divheight）{
specs = document.getElementById（divid）;
specs.style.width = divwidth;
specs.style.height = divheight;
}
// - >
< / script>
< / head>
< body>
< a href =" javascript ：viewer_dimensions（'' blue''，''200px''，''200px''）">更改为200
x 200< / a>
< div id =" ;蓝色"风格= QUOT;位置：绝对的;左：209px;顶部：89px;宽度：115px;
身高：95px;的z-index：1; background-color：＃0000FF">< / div>
< / body>
< / html>
nevermind, I got it working. Here is what I did:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
<!--
function viewer_dimensions(divid,divwidth,divheight) {
specs = document.getElementById(divid);
specs.style.width = divwidth;
specs.style.height = divheight;
}
//-->
</script>
</head>
<body>
<a href="javascript:viewer_dimensions(''blue'',''200px'', ''200px'')">change to 200
x 200</a>
<div id="blue" style="position:absolute; left:209px; top:89px; width:115px;
height:95px; z-index:1; background-color: #0000FF"></div>
</body>
</html>
这篇关于动态更改CSS图层尺寸？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
