如何使用JavaScript變量設置函數設置CSS寬度？

我有這樣的代碼：如何使用JavaScript變量設置函數設置CSS寬度？

...<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()">...

所有我試圖做的是創建一個將使用一個公式根據窗口大小設置元素的高度和寬度，確保高度和寬度的功能是相同。我對JavaScript非常陌生（幾乎一無所知），所以儘管存在大量這類問題的例子，並且我遵循這些問題，但我無法獲得此代碼的工作。我究竟做錯了什麼？

來源

2013-11-27 Megakoresh

是我看到的問題是，對於部分標籤ISN」 onload事件t發射。您應該將您的javascript作爲自我執行的匿名函數添加到身體標記的末尾，這將對您有用。

<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>

的演示在這裏看到：http://jsfiddle.net/T7DW6/

來源

2013-11-27 14:31:06

你應該的onload移動到身體標記：

<body onLoad="handleSize()"> 
<section id="spin">...

來源

2013-11-27 14:30:20 AlliterativeAlice

-1

這對我的作品

<!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>

來源

2013-11-27 14:30:31 user3018981

好吧，那很奇怪。是爲對象創建一個單獨的變量，並通過變量工作，謝謝。我完全困惑，爲什麼它沒有按照我嘗試的方式工作。 – Megakoresh

@Megakoresh - 看到我的文章 - 它會按照你這樣做的方式工作，只是你的onload事件沒有被觸發，這實際上是在這裏引起你的問題。在接受與您的實際問題無關的問題之前，您應該通讀所有答案。 –

OP要求元素的高度和寬度相同。除非窗口是完美的正方形，否則獲取window.innerHeight和window.innerWidth如何實現OP？ –

我會建議你使用jQuery，即使用世界各地的JavaScript庫。因此，爲了使用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'); 
    });

功能將設置元素的寬度和高度來匹配窗口大小。如果高度>寬度，那麼它將使用寬度作爲寬度&高度，否則它將使用高度。

我假設你想自動改變這一點，如果是大小的窗口，然後做的時候一個對象已經加載發生此

$(window).resize(function(){ 
      setElementSize('spin'); 
    });

來源

2013-11-27 14:31:50

onload事件。

的onload是最常見的元素中使用，一旦網頁已經完全加載的所有內容（包括圖片，腳本文件，CSS文件等）執行腳本。車身，車架，框架，iframe中，IMG，INPUT TYPE = 「形象」，鏈接，腳本，樣式

從這裏：event_onload

然後

onload事件僅由下面的HTML標籤支持。一個是可能不是這裏最好的（身高和體重並不能改變什麼，你應該使用一個div 爲了知道，使用一個，請仔細閱讀本： what-is-the-difference-between-section-and-div

來源

2013-11-27 14:38:17 user2964961

請不要參考w3schools，它不是一個可靠的參考點。但是，引用w3c或mozilla的開發人員參考被認爲是可靠的信息來源。 –

我試試你的考試，它工作正常。我改變的唯一的事情是th您致電

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(); 
}

我認爲onLoad="handleSize()"必須onload="handleSize()"但因爲它是不是一個好的做法不使用這樣的函數e路！

來源

2013-11-27 14:44:33

如何使用JavaScript變量設置函數設置CSS寬度？

回答

相關問題