JavaScript知识
- DOM增删改
- 操作内联样式
-
- 获取元素的样式
- 例子
DOM增删改
- 北京
var myClick = function (btn, fun) {
var btn = document.getElementById(btn);
btn.onclick = fun;
}
window.onload = function () {
//创建一个“广州”节点，添加到#city下
myClick("btn1", function () {
//document.createElement()可以用于创建一个元素节点对象
//它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
//并将创建好的对象作为返回值返回
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
//document.createTextNode()可以用来创建一个文本节点对象，需要一个文本内容作为参数
//将会根据该内容创建文本节点，并将新的节点返回/*
* 将gzText设置li的节点
*appendChild()-向父节点中添加一个新的字节点
*- 用法：父节点.appendChild(子节点);
*/
li.appendChild(gzText);
var city = document.getElementById("city");
city.appendChild(li);
});
//将“广州”节点插入到bj前面
myClick("btn2", function () {
//创建广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取父节点city
var city = document.getElementById("city");
//inserBefore
//- 可以在指定的字节点前插入新的子节点
// 父节点.inserBefore(新节点,旧节点)
city.insertBefore(li, bj);
});
//广州节点替换北京节点
myClick("btn3", function () {
//创建广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取父节点city
var city = document.getElementById("city");
//replaceChild
//- 可以在指定的字节点替换新的子节点
// 父节点.replaceChild(新节点,旧节点)
city.replaceChild(li, bj);
});
//删除北京节点
myClick("btn4", function () {
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取父节点city
var city = document.getElementById("city");
/*
*removechlid()
*- 删除子节点
*- 语法：父节点.removeChild(子节点);
*
*/
city.removeChild(bj);
});
}
【JavaScript|JavaScript知识——DOM增删改、操作内联样式】其中第一步的“创建一个“广州”节点，添加到#city下”，用第二种方法：
myClick("btn5", function () {
var li = document.createElement("li");
li.innerHTML = "广州";
var city = document.getElementById("city");
city.appendChild(li);
});
操作内联样式 操作CSS
通过JS修改元素的样式：
元素.style.样式名 = 样式值;
例子：
>
window.onload =function(){
var btn = document.getElementById("btn");
var box = document.getElementById("box");
btn.onclick = function(){
box.style.width = "300px";
}
}
>
#box{
height: 150px;
width: 150px;
background-color: red;
}
注意如果CSS的样式名中含有-，比如background-color，这种样式名是不合法的。去掉-改成大写。
backgroundColor
通过style属性设置的样式都是内联样式，内联样式具有较高的优先级。
但是如果在样式中，有!important，则样式会有最高的优先级，会使得JS失效。
所以尽量不要使用!improtant
获取元素的样式 上述JS中的修改和读取的都是内联样式，如果想读取样式表中的样式，就没有办法了。
语法：
元素.currentStyle.样式名
//可以读取当前显示的样式
但是这个方法只有IE支持
在其他浏览器的方法：
getComputedStyle()这个方法来获取当前的样式，这个是window方法，可以直接使用需要两个参数：
1、要获取样式的元素；
2、可以传递一个伪元素，一般都传null；
例子
文章图片
文章图片
当scrollHeight - scrollTop == clinetHeight 时，说明滚动条到底了。
但是但是！！！ 在调试过程中发现，即使滚动条到底了，也无法触发行为，原因是：
调试得知chrome浏览器下scrollTop是小数，而clientHeight和scrollHeight始终是整数。所以在相减之后，结果始终是一个大于clinetHeight的小数。
解决方法：将等式改为不等式，并且左边-1：
scrollHeight - scrollTop -1 < clinetHeight例子：阅读用户须知，滚动条不到底，无法勾选：
>
window.onload = function () {
//滚动条到底的时候，表单才能用
var info = document.getElementById("info");
var inputs = document.getElementsByTagName("input");
info.onscroll = function () {
//检查滚动条是否到底
if (info.scrollHeight - info.scrollTop - 1 < info.clientHeight) {
inputs[0].disabled = false;
inputs[1].disabled = false;
}};
var btn = document.getElementById("btn");
btn.onclick = function(){
alert(info.scrollHeight - info.scrollTop);
alert(info.clientHeight);
};
};
>
#info {
width: 300px;
height: 500px;
background-color: #bfa;
overflow: auto;
}
欢迎用户注册
...
我到底了~~
我已仔细阅读，一定遵守协议
在某个区域内，鼠标移动的坐标会被记录下来：
事件对象：当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
>
window.onload = function () {
var areaDiv = document.getElementById("areaDiv");
var showDiv = document.getElementById("showDiv");
areaDiv.onmousemove = function (event) {
//在showDiv里面显示鼠标坐标
// alert(event);
var x= event.clientX;
var y= event.clientY;
showDiv.innerHTML = "x="+x+","+"y="+y;
}
};
>
#areaDiv {
width: 350px;
height: 150px;
border: 1px solid black;
}#showDiv {
width: 350px;
height: 50px;
border: 1px solid black;
}
文章图片
div跟随鼠标走动
>
#box{
height: 150px;
width: 150px;
background-color: red;
position:absolute;
}
>
window.onload = function(){
var box = document.getElementById("box");
document.onmousemove = function(event){
var left = event.clientX;
var top = event.clientY;
var st = document.documentElement.scrollTop;
var sl = document.documentElement.scrollLeft;
box.style.left = left+sl+"px";
box.style.top = top+st+"px";
}
}
