概述
进阶版JavaScript学习第二期,下方主要介绍关于进阶版JavaScript学习【第二期】的全文内容,希望对你有所帮助。距离上一期更新已经过了好久,非常抱歉。因为自己的一些原因,没有能够及时更新。
博主主页:GUIDM的主页
JavaScript系列刷题指南:点击此处
结尾放上5题简单的HTML习题。
常用元素的属性操作
HTML部分:
<button ID='nh'>你好</button>
<button ID='zgm'>在干嘛</button>
<img src='……' alt=' ' Title='你好'>
JavaScript部分:
1、获取元素
var nh=document.getElementByID('nh');
var zgm=document.getElementByID('zgm');
var img=document.querySelector('img');
nh.onclick=function(){
img.src='img/nh.jpg';
img.Title='你好';
}
zgm.onclick=function(){
img.src='img/zgm.jpg';
img.Title='在干嘛';
}
表单元素的属性操作
利用DOM可以操作如下表单元素的属性:
- type
- value
- checked
- selected
- Disabled
HTML部分:
<button>按钮</button>
<input type='text' value='输入内容'>
JavaScript部分:
1、获取元素
var btn=document.querySelector('button');
var input=document.querySelector('input');
2、注册事件
btn.onclick=function(){
input.value='被点击了';
btn.Disabled=true;
//this.Disabled=true;
//this指向的是事件函数的调用者(btn)
样式属性操作
1、element.style(样式较少或功能简单的时候使用)
行内样式操作:Js中修改的样式会添加到行内样式中,Js的行内样式权重高。
HTML部分:
<div></div>
CSS部分:
div{
wIDth:200px;
height:200px;
background-color:pink;
}
JavaScript部分:
1、获取元素
var div=document.querySelector('div');
2、注册事件
element.style里面的属性采用驼峰命名法。
div.onclick=function(){
this.style.background='purple';
this.style.wIDth='250px';
}
2、element.classname
类名样式:直接更改元素名,会覆盖原先的类名。
HTML和CSS都和上面的一样,在div里面加一个class=‘ ’
JavaScript部分:
1、获取元素
var test=document.querySelector('div');
2、注册事件
test.onclick=function(){
this.classname='change';
}
//当前元素的类名改为了change但要在CSS中写好想要的样式
牛客网刷题-HTML5题
请依次写出以下类型的输入框。
1. 类型为密码,默认值为"Nowcoder"
2. 类型为复选框,且状态为已勾选
请写出具有表格标题为"Nowcoder"的2行3列表格结构。
请写出列表项为"Nowcoder"且列表项内容也为"Nowcoder"的自定义列表。
总结
以上是编程之家为你收集整理的进阶版JavaScript学习【第二期】全部内容,希望文章能够帮你解决进阶版JavaScript学习【第二期】所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。