标签：style 元素 JavaScript03 标签 编程 getElementById BOM document 隐藏
导语：BOM(Browser Object Model) 是指浏览器对象模型。
在JS中获取HTML元素
1.通过标签中的id属性
document.getElementById(); //通过标签中的id属性获得html中的元素,()中放html标签的id
//例如:
<body>
<div id="d1"></div>; <!--创建一个div标签-->
<script type="text/javascript">
var di = document.getElementById("d1"); //通过标签id获得元素给di赋值
console.log(di); //在控制台答应di
</script>
</body>2.通过标签名
document.getElementsByTagName(); //通过标签名获得html元素,()中放html标签名
//例如:
<body>
<!--创建两个div标签-->
<div id="d1"> </div>
<div id="d2"> </div>
<script type="text/javascript">
var ds = document.getElementsByTagName("div"); //定义一个变量来存放得到的元素
console.log(ds); //控制台打印定义的变量ds
</script>
</body>运行结果为:
3.通过标签中class属性
document.getElementsByClassName(); //通过标签class属性获得html元素,()中放class名
//例如:
<body>
<div id="d1" class="ds"> </div>
<div id="d2" class="ds"> </div>
<script type="text/javascript">
var ds2 = document.getElementsByClassName("ds");
console.log(ds2);
</script>
</body>在控制台查看结果如下
HTML元素上的常用事件
1.点击事件 onclick
<body>
<button type="button" onclick="f()"></button>
<script type="text/javascript">
function f(){
console.log("我被点击了");
};
</script>
</body>2. 双击事件 ondblclick
<body>
<button type="button" ondblclick="f()"></button>
<script type="text/javascript">
function f(){
console.log("我被双击了");
};
</script>
</body>3. 获得焦点事件 onfocus
<body>
<input type="text" id="i1" onfocus="f2()" value="获得焦点前"/> //如果获得了焦点就会调用f2()方法
<script type="text/javascript">
function f2(){ //将输入框里的内容变成"获得焦点后"
var i=document.getElementById("i1");
i.value="获得焦点后";
};
</script>
</body>4.失去焦点事件 onblur
<body>
<input type="text" id="i1" onfocus="f2()" value="失去焦点前"/> //如果失去了焦点就会调用f2()方法
<script type="text/javascript">
function f2(){ //将输入框里的内容变成"失去焦点后"
var i=document.getElementById("i1");
i.value="失去焦点后";
};
</script>
</body>5.鼠标移入事件 onm ouseover
<body>
<input type="text" id="i1" onfocus="f2()" value="鼠标没有移入"/> //如果鼠标移入就会调用f2()方法
<script type="text/javascript">
function f2(){ //将输入框里的内容变成""
var i=document.getElementById("i1");
i.value="";
};
</script>
</body>6.鼠标移出事件 onm ouseout
<body>
<input type="text" id="i1" onfocus="f2()" value="鼠标没有移出"/> //如果鼠标移出就会调用f2()方法
<script type="text/javascript">
function f2(){ //将输入框里的内容变成""
var i=document.getElementById("i1");
i.value="";
};
</script>
</body>HTML元素上的常用属性
- textContent ：标签的文本内容(定义的html语句不生效
- innerHTML ：标签中的html内容(html语句会生效)
- value ：元素的值(适用于具备value属性的元素,例如input)
- checked ：是否被选中(适用于单选框,多选框)
- style ：标签中的style属性(用于设置样式)
JS中的for循环
控制元素的显示
display
1.none 不显示(页面不会有空间)
2.block 以块状元素显示
3.inline 以行内元素显示
4.inline 以行内块状显示
visibility
1.visible 可见
2.hidden 不可见(会占据页面空间)
opacity
0~1之间的值(用于控制元素的透明度)
案例详解
实现图片点击隐藏和显示功能
效果如下：
当点击第一个按钮时,图片隐藏并不保留空间
当第二个按钮点击时,图片隐藏切保留空间
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<style>
div{ <!--设置div样式,宽高设置为100px,背景颜色设置为红色-->
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="d1" onclick=""> <!--创建div标签,id设置为d1-->
</div>
<button id="b1" type="button" onclick="fn1()">点我隐藏</button> <!--创建隐藏按钮b1-->
<button id="b2" type="button" onclick="fn2()">点我隐藏</button> <!--创建隐藏按钮b2-->
<script type="text/javascript">
function fn1() { //定义函数fn1,隐藏不保留空间
// document.getElementById()
//如果显示 那么隐藏
//如果隐藏 那么显示
if(d1.style.display==="none"){
d1.style.display="block"
b1.textContent="点我隐藏"
}else{
d1.style.display="none"
b1.textContent="点我显示"
}
}
function fn2() { //定义函数fn2隐藏但保留空间
// document.getElementById()
//如果显示 那么隐藏
//如果隐藏 那么显示
if(d1.style.opacity==0){
d1.style.opacity=1 //透明度为1表示完全不透明
b2.textContent="点我隐藏"
}else{
d1.style.opacity=0 //透明度为0表示完全透明(不显示)
b2.textContent="点我显示"
}
}
</script>
</body>
</html>
你要尽全力保护你的梦想。那些嘲笑你梦想的人，他们注定失败，他们想把你变成和他们一样。我坚信，只要心中有梦想，我就会与众不同。你也是。
标签：style,元素,JavaScript03,标签,编程,getElementById,BOM,document,隐藏 来源： https://blog.csdn.net/github_67177094/article/details/123204348
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。