JavaScript DOM操作案例点击按钮选择菜单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <input type="button" value="点击选择" id="bt"/><br/>
 9 <select name="" id="ss">
10     <option value="1">油炸榴莲</option>
11     <option value="2">红烧臭豆腐</option>
12     <option value="3">清蒸臭鸡蛋</option>
13     <option value="4">凉拌咸鸭蛋</option>
14     <option value="5" id="op1">爆炒小辣椒</option>
15 </select>
16 <script>
17     //封装id获取元素
18     function my$(id) {
19         return document.getElementById(id);
20     }
21     //通过id获取按钮元素,注册点击事件,添加事件处理函数
22     my$("bt").onclick = function () {
23         //获取点击选中的菜单元素设置selected属性值
24       my$("op1").selected = true;
25     };
26 </script>
27 </body>
28 </html>

原文地址：https://www.cnblogs.com/cuilichao/p/9339015.html

时间： 2024-11-09 16:31:49

JavaScript DOM操作案例点击按钮选择菜单的相关文章

JavaScript DOM操作案例点击按钮修改div的属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" value="修改属性" id="bt"/> <div id=&q

JavaScript DOM操作案例点击按钮通过类样式的方式显示跟隐藏div

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; background-color: pink; } .cls { display: none; } </style> </h

JavaScript DOM操作案例点击按钮实现网页开关灯

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .cls { background-color: black; } </style> </head> <body> <input type="button&qu

JavaScript DOM操作案例美女相册

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { font-family: "Helvetica", "Arial", serif; color: #333

JavaScript DOM初体验点击按钮弹窗

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body> 9 <input type="button" value="点击" onclick="alert(

JavaScript DOM操作案例封装innerText跟textContent函数(浏览器兼容)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 500px; height: 20px; border: 2px solid red; } </style> </head> <body> <i

JavaScript DOM操作案例tab切换案例

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px

在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Model(文本对象模型). D : 文档(html或xml文档) O : 对象(文档对象) M : 模型 1.2.DOM结构 DOM将文档以家谱树的形式来表现. 下面是一个简单的html文档,我们可以看出该文档的DOM结构如下 1 <!DOCTYPE html> 2 <html> 3 <

javascript DOM操作HTML文档

文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态访问和更新文档内容.结构和样式的语言平台.提供了标准的HTML和XML对象集,并有一个标准接口来访问并操作他们,即任何一个 html 元素可以使用 JavaScript DOM 动态访问和控制. 1. DOM概述文档对象模型定义了JavaScript可以进行操作的浏览器,描述了文档对象的逻辑结构及各个功能组件的标准接口.主要包括以下内容: 核心Jav