一、变量
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
原文地址：https://www.cnblogs.com/Jomini/p/8641492.html
时间： 2024-08-28 08:14:52