如何使用JavaScript变量使函数设置CSS宽度？
[英]How to make a function set css width with a JavaScript variable?
问题描述
I have this code: 
我有以下代码：
...<script>
function handleSize()
{
var setObjectSize=window.innerWidth - 600;
document.getElementById("spin").style.width=setObjectSize + "px";
document.getElementById("spin").style.height=setObjectSize + "px";
}
</script>
</head>
<body>
<section id="spin" onLoad="handleSize()">...
All I am trying to do is to create a function that will set the height and width of the element according to window size using a formula and make sure height and width are the same. 我要做的就是创建一个函数，该函数将使用公式根据窗口大小设置元素的高度和宽度，并确保高度和宽度相同。 I am very new to javascript (almost know nothing about it), so despite there being a ton of example of such questions, and me following them, I can't get this code to work. 我对javascript非常陌生（几乎一无所知），因此尽管有很多此类问题的示例，但我关注它们却无法使此代码正常工作。 What am I doing wrong? 我究竟做错了什么？
6 个解决方案
解决方案1
1 已采纳 2013-11-27 14:31:06
The problem that I'm seeing, is that the onload event for the section tag isn't firing. 我看到的问题是section标签的onload事件没有触发。 You should add your javascript as a self-executing anonymous function to the end of your body tag and this will work for you. 您应该将JavaScript作为自动执行的匿名函数添加到body标签的末尾，这将对您有用。
<body>
<section id="spin" style="border:5px solid black;"></section>
<script>
(function () {
var setWindowSize = window.innerWidth - 600;
document.getElementById("spin").style.width = setWindowSize + "px";
document.getElementById("spin").style.height = setWindowSize + "px";
})();
</script>
</body>
See Here for a demo: http://jsfiddle.net/T7DW6/ 请参阅此处以获取演示： http : //jsfiddle.net/T7DW6/
解决方案2
0 2013-11-27 14:30:20
You should move onload to the body tag: 您应该将onload移至body标签：
<body onLoad="handleSize()">
<section id="spin">...
解决方案3
0 2013-11-27 14:31:50
I would suggest you to use jQuery , that is JavaScript library used world wide. 我建议您使用jQuery ，即全世界使用的JavaScript库。 So in order to develop it using jQuery you need to do next 因此，为了使用jQuery开发它，您需要下一步
function setElementSize(elId) {
var _w $(window); //to get instance of window
var _el $('#' + elId); //jquery to get instance of element
var _width = _w.width();
var _height = _w.height();
//set width=height
if(_height>_width)
{
_height = _width;
} else { _width = _height; }
_el.css({
width: _width,
height: _height
});
}
//this will execute script when document is loaded.
$(document).ready(function(){
setElementSize('spin');
});
Function above will set width and height of element to match window size. 上面的函数将设置元素的宽度和高度以匹配窗口大小。 If height > width then it will use width as width & height otherwise it will use height. 如果height> width，那么它将使用width作为width＆height，否则将使用height。
I assume that you want to change this automatically if window is resized then do this 我假设您要在更改窗口大小时自动更改此设置，然后执行此操作
$(window).resize(function(){
setElementSize('spin');
});
解决方案4
0 2013-11-27 14:38:17
The onload event occurs when an object has been loaded. 当已加载对象时，将发生onload事件。
onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). 一旦网页完全加载了所有内容（包括图像，脚本文件，CSS文件等），onload最常在元素内用于执行脚本。
onload is only Supported by the Following HTML Tags: body, frame, frameset, iframe, img, input type="image", link, script, style 以下HTML标记仅支持onload：正文，框架，框架集，iframe，img，输入type =“ image”，链接，脚本，样式
from here: event_onload 从这里开始： event_onload
then a is may be not the best here (height and weight does not change anything, you should use a div. In order to know, the one to use, please read this: what-is-the-difference-between-section-and-div 那么a可能不是最好的选择（高度和重量没有任何变化，您应该使用div。为了知道要使用的那个，请阅读以下内容： what-is-the-difference-beween-section-和div
解决方案5
0 2013-11-27 14:44:33
I try your exam and it works fine. 我尝试了考试，效果很好。 The only thing that i changed was the way that you call the function 我唯一改变的是您调用函数的方式
function handleSize(){
var setWindowSize=window.innerWidth - 600;
document.getElementById("spin").style.width=setWindowSize + "px";
document.getElementById("spin").style.height=setWindowSize + "px";
}
window.onload = function () {
handleSize();
}
I think that onLoad="handleSize()" have to be onload="handleSize()" but don't use that way because it is not a good practise! 我认为onLoad="handleSize()"必须为onload="handleSize()"但不要使用这种方式，因为这不是一个好习惯！
解决方案6
-1 2013-11-27 14:30:31
this works for me 这对我有用
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button and watch it grow.</p>
<button id = "myButton" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var w = window.innerWidth;
var h = window.innerHeight;
var x = document.getElementById("myButton");
x.style.width = w + "px";
x.style.height = h + "px";
}
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.