Javascript入門(二)變數、擷取元素、操作元素

最後更新：2018-03-24 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：ntb src color text def asc 通過 font got

一、變數

Javascript 有五種基礎資料型別 (Elementary Data Type) number、String、boolean、undefined、null 一種複合類型：object

二、使用getElementById方法擷取元素

方式一：

這裡的元素，指html裡的標籤，通過內建docuement的 ‘getElementById‘ 方法擷取頁面上設定了 id 屬性的元素，擷取一個html對象，並為其賦值，

先不賦值看個例子：

<!DOCTYPE html><html lang="en"><head>     <script type="text/javascript">        var div1  = document.getElementById(‘div1‘);     </script></head><body>    <div id = ‘div1‘ title="This is a label"> This is label </div></body></html>

然後開啟瀏覽器，吧滑鼠點在該標籤（div1）上面：會有一個提示出來，這個就是div1 這元素的title 儲存的資訊

接下去通過擷取來修改title 這個標籤，但是如下方法會失敗，因為頁面掃描方式從上到下，先掃描不存在的變數就沒法改變了，會報錯。

<!DOCTYPE html><html lang="en"><head>     <script type="text/javascript">        var div1  = document.getElementById(‘div1‘).title = ‘I got it!‘;     </script></head><body>    <div id = ‘div1‘> This is label </div></body></html>

所以，要把script放在div標籤下面

<!DOCTYPE html><html lang="en"><head>     <script type="text/javascript">             </script></head><body>    <div id = ‘div1‘> This is label </div>    <script type="text/javascript">          document.getElementById(‘div1‘).title = ‘I got it!‘;     </script></body></html>

修改title後的效果

如果在 <head>標籤裡的<script>中改的話，可以用window.onload方法, 可以在頁面載入完再修改屬性，這樣就能掃描到了。

<!DOCTYPE html><html lang="en"><head>     <script type="text/javascript">         window.onload = function(){        document.getElementById(‘div1‘).title= ‘I got it!‘;       }    </script></head><body>    <div id = ‘div1‘> This is label </div> </body></html>

三、操作元素

JS可以通過擷取元素，對元素屬性修改；

--- 操作的方法： 1、點的操作： ‘.’ ；

2、括弧操作 : ‘[ ]’ ；

--- 屬性修改方式：1、JS 的屬性寫法和html一樣；

例子1：修改屬性:

<!DOCTYPE html><html lang="en"><head>        window.onload = function(){        var input  = document.getElementById(‘input1‘);        var target = document.getElementById(‘text1‘);        //attribute         var val  = input.value;         var type = input.type;         var name = input.name;         //change attribute        target.style.color = ‘red‘;        target.style.fontSize = ‘val‘;     }    </script></head><body>     <input type = "text" name = "setSize" id="input1" value = "20px">     <h1 id = "text1"> SetSize </h1> </body></html>

效果，下面的setSize

Javascript入門(二)變數、擷取元素、操作元素

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More