我對編碼很陌生，我第一次嘗試結合 html、css 和 javascript。任務是讓按鈕對框進行更改。例如，我的一個按鈕是“增長”，我希望在單擊按鈕時框的大小增加。這是我的 HTML
<!DOCTYPE html>
<html>
<head>
<title>Watch That Box</title>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->
</head>
<body>
<p>Press the buttons to change the box!</p>
<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>
<link rel="stylesheet" href="./style.css">
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
這是我的 CSS
body {
background-color: aliceblue;
}
.box {
height:150px;
width:150px;
background-color:orange;
margin:25px
}
而且還沒有javascript。我什至不知道從哪里開始，我知道如何結合 CSS 和 HTML，但是在添加 javascript 時我很難過。任何幫助表示贊賞，并提前感謝您。
uj5u.com熱心網友回復：
這是一個很好的起點。 https://www.w3schools.com/jsref/event_onclick.asp
uj5u.com熱心網友回復：
好的。javaScript 可以修改元素（例如 HTML 按鈕）及其屬性，例如文本內容和樣式 (CSS)。首先，您需要將元素選擇為變數
let btn = document.querySelector('#grow-btn)
let btn 表示你要宣告一個變數，一塊存盤，命名為 btn。您將運算式的結果放入其中。
btn.addEventListener("click", function(){/*here you're handling the click*/})
為 btn 添加一個偵聽器，這樣您就可以知道何時進行了單擊并對其進行回應。
在塊內，您可以以類似的方式更改框的一些 css 屬性
uj5u.com熱心網友回復：
在您的按鈕中，添加一個函式“onclick”，如下所示：
<button id="button1" onclick="growFunction()">Grow</button>
然后，您轉到 javascript.js 并創建將在單擊按鈕時執行的 growFunction()。
此外，要執行 growFunction，要么不使用引數，在函式內部使用 document.getElementById('button').{your code}，要么傳遞此引數，例如：
<button onclick="growFunction(this)">Grow</button>
javascript.js
growFunction(element){
element.yourcode...
}
uj5u.com熱心網友回復：
一些幫助您入門的技巧，首先您可以使用“onClick”HTML 屬性使按鈕執行某些操作，您可以在其中指定單擊按鈕時要執行的函式。聽眾是一些人這樣做的方式，但這可能比您準備的要復雜得多。
<button id="button1" onclick="growBox()">Grow</button>
在您的 js 檔案中，您將定義您的函式：
function growBox() {
let box = document.getElementById("box");
box.style.height = '200px';
box.style.width = '200px';
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/是一個很好的了解事物如何作業的資源，并且知道僅使用谷歌搜索“如何使用按鈕 javascript 更改 css”之類的東西幾乎可以教給您任何東西。即使作為一名作業開發人員，您仍然會這樣做。
繼續努力，這種感覺就是我們所有人的開始。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/437219.html
標籤：javascript html css