Javascript入門(二)變量、獲取元素、操作元素
阿新 • • 發佈：2018-03-24
javascrip ima 報錯 nload change -c win attribute ttr
一、變量
Javascript 有五種基本數據類型 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入門(二)變量、獲取元素、操作元素