JavaScript基础之操作元素,修改元素属性

简介: JavaScript基础之操作元素,修改元素属性

实现效果:

js代码如下:

<body>
    <button id="android">Android开发</button>
    <button id="java">Java开发</button><br>
    <img src="img/10b92e374bebdbe9b648ba29d1d7e72.png" title="Android">
    <script type="text/javascript">
      //事件源 
      var android = document.getElementById('android');
      var java = document.getElementById('java');
      var img = document.querySelector('img');
      //事件类型 点击
      android.onclick = function() {
        //事件处理程序 点击切换图片和鼠标经过时显示的文字信息
        img.src = 'img/10b92e374bebdbe9b648ba29d1d7e72.png';
        img.title = 'Android';
      }
      java.onclick = function() {
        img.src = 'img/221f6109f10f97406df83192d307a06.png';
        img.title = 'java';
      }
    </script>
</body>


目录
相关文章
|
17天前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
|
12天前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
17天前
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性,可以在不影响页面渲染的情况下异步加载脚本,并确保脚本的执行顺序。在实际应用中,需要根据具体情况选择合适的加载方式,并注意处理可能出现的问题,以确保页面能够正常加载和执行。
|
1月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
45 4
|
1月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
35 4
|
1月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
22 1
|
1月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
37 1
|
2月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
27 2
|
1月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
18 0
|
1月前
|
缓存 JavaScript 前端开发
深入理解Vue.js中的计算属性与侦听属性
【10月更文挑战第5天】深入理解Vue.js中的计算属性与侦听属性
24 0