JavaScript Day 2
上课日期：2019年8月2日
课程内容
一、JavaScript代码写在< body>中和写在< head>中
JavaScript代码一般都写在< body>中，如果执意要写在< head>中，由于< head>中没有进行初始化，则需要用到window.onload事件，即加载完成事件，意味着浏览器中的DOM元素已经渲染完成。
即，当我们定义一个按钮之后
< button id="btn" style="width: 100px; border: 1px solid red;">按钮< /button>
用
<head lang="en">
<script>
window.onload=function (){
var btn=document.getElementById("btn");
console.log(btn);
}
</script>
</head>
以及
<body>
<script>
var btn = document.getElementById("btn");
console.log(btn);
</script>
</body>
这两段代码都能获取到该id为btn的按钮
二、JavaScript中获取或设置元素属性
设置一个按钮
<button id="btn" class="btnlist" style="width: 100px; border: 1px solid red;">按钮</button>
使用类似
var btn = document.getElementById("btn");
console.log(btn.className);
btn.className = "btnlist btnadd";
这样的代码即可将btn按钮在原本的类btnlist的基础上再添加一个btnadd类。
（注：在添加新的类的时候，一定要注意先写其原本的类）
三、JavaScript中操作元素的文本值
操作当前元素文本值有两种方法，即btn.innerHTML 或者btn.innerText
例如，我要将之前所定义的按钮中的文字修改，可用
var btn = document.getElementById("btn");
btn.innerHTML="点击我"
btn.innerText="点击我"
来实现，这两种方法都可以将按钮里面的文字改为“点击我”。
区别：
btn.innerHTML="<span>我是按钮</span>";
btn.innerText="<span>我是按钮</span>";
innerHTML方法如果所给的值里面包含标签，例如< span>标签，它可以对该标签进行解析，而innerText方法则不会解析标签，而是将你所给的值直接显示出来。
四、JavaScript中对样式的相关操作
JavaScript可以对行内样式进行操作，但不能直接操作内嵌或者外部样式
例如：
var btn = document.getElementById("btn");
btn.style.backgroundColor="red";
console.log(btn.style.width);
可以将按钮的背景颜色改成红色，也可以输出按钮的宽度值
如果要对内嵌样式或者外部样式进行操作，则需要用到window.getComputedStyle()方法
console.log(window.getComputedStyle(btn).height);
这样就可以输出写在内嵌样式中的高度值了。
五、JavaScript的其他获取属性方式
使用getAttribute方法可以获取到对象的属性
例如：
console.log(btn.getAttribute("id"));
console.log(btn.getAttribute("class"));
console.log(btn.getAttribute("style"));
就可以获取到按钮的id值，class值以及style样式的值
同时，getAttribute也可以获取到自定义属性，而自定义属性是使用setAttribute定义的
btn.setAttribute("data-src", "./img/1.jpg");
console.log(btn.getAttribute("data-src"));
六、JavaScript中数据类型的强制转换
由于JavaScript是弱类型语言，所以在定义和使用变量时经常会出现数据类型上的问题，所以讲变量的数据类型进行强制转换很重要。
数据类型强制转换的方法有parseFloat，parseInt等
例如：
var b = "1.23";
console.log(parseFloat(b));
console.log(parseInt(b));
第一次输出的是强制转换成浮点型的数据，为1.23
第二次输出的则是强制转换为整型的数据，即为1
扫一扫
1894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
