- 操作元素内容
<style>
body {
display: flex;
flex-direction: column;
}
div {
width: 100px;
height: 100px;
line-height: 100px;
background: #000000;
margin: 20px auto;
color: #ffffff;
text-align: center;
}
div:first-child {
cursor: pointer;
}
div:nth-child(2),
div:nth-child(3) {
width: 400px;
}
</style>
<div id="dian">获取当前时间</div>
<div id="xian"></div>
<div id="san"></div>
<div></div>
<p>
<span>我是文字123</span>
</p>
<script>
// javascript的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里面的内容，属性等
// 以下都是属性
// 改变元素内容
// element.innerText 从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
// element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
var dian = document.getElementById('dian');
var xian = document.getElementById('xian');
dian.onclick = function () {
xian.innerText = getTime();
}
san.innerText = getTime();
function getTime() {
var time = new Date();
var y = time.getFullYear();
var m = time.getMonth() + 1;
var dates = time.getDate();
var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var w = time.getDay();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var mins = time.getMinutes();
mins = mins < 10 ? '0' + mins : mins;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return '今天是' + y + '年' + m + '月' + dates + '号 ' + arr[w] + '\t' + h + '时' + mins + '分' + s + '秒';
}
// innerText 和 innerHTML的区别
// 1.不识别html标签 非标准 去除空格和换行
var div = document.querySelector('div');
div.innerText = '<strong>今天是</strong>2019';
// 2.innerHTML 识别html标签 W3C标准 保留空格和内容
div.innerHTML = '<strong>今天是</strong>2019';
// 这两个属性是可读写的 可以获取元素里面的内容
var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);
</script>
- 操作常用元素属性
- innerText, innerHTML改变元素内容
- src, href
- id, alt, title
<button id="shouji">手机</button>
<button id="niunai">牛奶</button>
<img src="./JS基础/images/hot1.jpg" alt="" title="我是牛奶">
<script>
// 常用元素的属性操作
var shouji = document.getElementById('shouji');
var niunai = document.getElementById('niunai');
var img = document.querySelector('img');
shouji.onclick = function () {
img.src = "./JS基础/images/hot2.jpg";
img.title = '我是手机'
}
niunai.onclick = function () {
img.src = "./JS基础/images/hot1.jpg";
img.title = '我是牛奶'
}
</script>
- 根据不同时间切换不同图片
<h2>早上好</h2>
<img src="./JS基础/images/hot1.jpg" alt="">
<script>
// 根据不同时间，显示不同问候语
var h2 = document.querySelector('h2');
var img = document.querySelector('img');
var time = new Date();
var h = time.getHours();
if (h < 12) {
h2.innerHTML = '早上好';
img.src = './JS基础/images/hot1.jpg'
} else if (h < 18) {
h2.innerHTML = '中午好';
img.src = './JS基础/images/hot2.jpg'
} else {
h2.innerHTML = '晚上好';
img.src = './JS基础/images/hot3.jpg'
}
</script>
- 操作表单元素属性
<button>按钮</button>
<input type="text" value="我是贝贝">
<script>
// 通过DOM可以操作如下表单属性
// type,value,checked,selected,disabled
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function (){
// 表单里面的值 文字内容是通过value来修改的
input.value = '我是贝贝我被点击了';
// 如果想要某个表单被禁用 不能点击 用disabled
// button.disabled = true;
this.disabled = true;
// this 指的是函数的调用者 btn
}
- 隐藏显示密码
<style>
.father {
position: relative;
width: 200px;
margin: 0 auto;
}
input {
border: none;
width: 100%;
height: 20px;
outline: none;
padding-left: 10px;
border-bottom: 1px solid #cccccc;
}
span{
position: absolute;
top: 9px;
right: 5px;
width: 5px;
height: 5px;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
transform: rotate(45deg);
cursor: pointer;
}
</style>
</head>
<body>
<div class="father">
<input type="password" id="xian">
<span id="dian"></span>
</div>
<script>
var dian = document.getElementById('dian');
var xian = document.getElementById('xian');
var flag = 0;
dian.onclick = function(){
if(flag == 0){
xian.type = 'text';
flag = 1;
}else{
xian.type = 'password'
flag = 0;
}
}
</script>
</body>
操作元素样式属性
我们可以通过js修改元素的大小，颜色，位置等样式
- element.style 行内样式操作
- element.className 类名样式操作
注意：
- js里面的样式采取驼峰命名法，比如 fontSize，backgroundColor
- js修改style样式操作，产生的是行内样式，css权重比较高
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
</div>
<script>
var div = document.querySelector('div');
div.onclick = function(){
this.style.backgroundColor = 'skyblue';
this.style.width = '100px';
this.style.height = '100px';
}
</script>
</body>
小练习：关闭二维码
<style>
div{
cursor: pointer;
}
#father {
position: relative;
width: 100px;
height: 100px;
background-color: pink;
margin: 0 auto;
}
#cha {
position: absolute;
top: 0;
left: -10px;
width: 10px;
height: 10px;
background-color: plum;
}
</style>
<div id="father">
<div id="cha"></div>
</div>
<script>
var cha = document.getElementById('cha');
var fath = document.getElementById('father');
cha.onclick = function () {
fath.style.display = 'none';
}
</script>
遍历精灵图
<style>
ul {
width: 136px;
display: flex;
flex-wrap: wrap;
}
li {
width: 24px;
height: 24px;
margin-left: 10px;
margin-bottom: 10px;
background-color: plum;
background: url(JS基础/images/TB.png) no-repeat;
list-style: none;
}
</style>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
var index = i *44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
显示隐藏文本框内容
获得焦点onfocus ，失去焦点 onblur
<style>
input {
color: #999999;
}
</style>
<input type="text" value="手机">
<script>
// 获取元素
var text = document.querySelector('input');
// 注册事件 获得焦点事件 onfocus
text.onfocus = function () {
if (this.value === '手机') {
this.value = '';
}
// 获得焦点把文本框里面的文字颜色变黑
this.style.color = '#333'
}
// 注册事件 失去焦点事件 onblur
text.onblur = function(){
if(this.value === ''){
this.value = '手机';
}
// 失去焦点需要把文本框里面的文字颜色变浅
this.style.color = '#999'
}
</script>
注意
- 如果样式修改过多，可以采取操作类名方式更改元素样式
- class是个保留字，因此使用className来操作元素类名属性
- className会直接更改元素的类名，会覆盖原先的类名
<style>
.father{
width: 200px;
height: 200px;
background-color: plum;
font-size: 20px;
cursor: pointer;
}
.beibei{
width: 100px;
height: 100px;
background-color: red;
color: royalblue;
}
</style>
<div class="father">
我是贝贝奇
</div>
<script>
// 使用element.style 获得修改元素样式 如果样式比较少或者功能简单的情况使用
var div = document.querySelector('div');
div.onclick = function(){
// 让我们当前元素的类名改为了beibei
// 通过修改元素的className更改元素的样式，适合于样式较多或者功能复杂的情况
div.className = 'beibei'
// 如果想要保留原先的类名，我们可以这么做
// div.className = 'father beibei'
}
</script>
小练习：表单验证
<style>
.wenben {
color: #999999;
padding-left: 10px;
margin-bottom: 10px;
margin-right: 20px;
}
p {
position: relative;
display: inline-block;
font-size: 14px;
}
.father{
position: relative;
}
.father div {
position: absolute;
top: 17px;
left: 178px;
width: 14px;
height: 14px;
background-color: #ffffff;
}
</style>
<div class="father">
<input type="text" value="邮箱/ID/手机号" class="wenben">
<div class="son"></div>
<p>请输入6~10位的数字</p>
</div>
<div>
<input type="button" value="点击关灯" class="guandeng">
</div>
<script>
var ipt = document.querySelector('.wenben');
var p = document.querySelector('p');
var son = document.querySelector('.son')
ipt.onfocus = function () {
if (this.value === '邮箱/ID/手机号') {
this.value = '';
}
this.style.color = '#333'
this.style.outlineColor = 'pink';
}
ipt.onblur = function () {
if (this.value === '') {
this.value = '邮箱/ID/手机号';
}
this.style.color = '#999'
if (this.value.length < 6 || this.value.length > 10) {
p.innerHTML = '输入有误，请输入6~10位数字';
son.style.backgroundColor = 'red';
}else{
p.innerHTML = '输入正确';
son.style.backgroundColor = 'green';
}
}
var guan = document.querySelector('.guandeng');
var body = document.querySelector('body');
var f = 0;
guan.onclick = function () {
if (f == 0) {
body.style.backgroundColor = '#000';
f = 1;
} else {
body.style.backgroundColor = '#fff';
f = 0;
}
}
</script>
613
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
