Day20 通过DOM改变HTML文档的元素的样式 | JS 事

2019-10-23 本文已影响0人反复练习的阿离很笨吧

任务1

阅读

首先学习了解 JavaScript 事件的知识

JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。
为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码：
onclick=JavaScript
（即对发生了什么事做出反应）

HTML 事件的例子：

当用户点击鼠标时
当网页加载后
当图像加载后
当鼠标移至元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户敲击按键时
所有 HTML DOM 事件的列表，请访问完整的 HTML DOM 事件对象参考手册

编码

<input id="name" type="text">    
<button id="submit-btn">Submit</button>

在HTML中增加上面的代码，然后通过JavaScript编写如下功能：

当点击按钮 submit-btn 时，在console中输出 name 中的内容
在输入过程中，如果按回车键，则同样执行上一条的需求
在输入过程中，如果按 ESC 键，则把输入框中的内容清空

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE 20</title>
</head>
<body onkeyup='whichbutton(event)'>

    <input id="name" type="text">    
    <button id="submit-btn">Submit</button>

    <script>
        document.getElementById('submit-btn').onclick=function() {
            console.log(document.getElementById('name').value);//HTML text 对象的value属性
        }

        function whichbutton(event) {
            if (event.keyCode===13) {
                console.log(document.getElementById('name').value); 
            }else if (event.keyCode===27) {
                console.clear();//清空console
            }        
        }
    </script>
</body>
</html>
<!-- 在HTML中增加上面的代码，然后通过JavaScript编写如下功能：

当点击按钮 submit-btn 时，在console中输出 name 中的内容
在输入过程中，如果按回车键，则同样执行上一条的需求
在输入过程中，如果按 ESC 键，则把输入框中的内容清空 -->

这边翻了犯了一个错误是 document.getElementById 前没有带上 document 。堪比上次写function忘带括号。

任务2

接下来学习如何用 JavaScript 操作 DOM 样式（CSS style）
控制元素的显示及隐藏

阅读

编码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
    <style>
        /*select {
            display: none;
        }*/
    </style>
</head>
<body>            
    <label>
        <input id="school" name="status" type="radio">
        School
    </label>
    <label>
        <input id="company" name="status" type="radio">
        Company
    </label>

    <select id="school-select">        
        <option>北京邮电大学</option>
        <option>黑龙江大学</option>
        <option>华中科技大学</option>
    </select>

    <select id="company-select">        
        <option>百度</option>
        <option>爱奇艺</option>        
    </select>

    <script>
        document.getElementById('school').onclick = function() {
            document.getElementById('company-select').style.display= 'none';
            document.getElementById('school-select').style.display= 'inline';
        }

        document.getElementById('company').onclick = function() {
            document.getElementById('school-select').style.display= 'none';
            document.getElementById('company-select').style.display= 'inline';
        }
    </script>
</body>
</html>
<!-- 基于如上 HTML，实现以下功能：
s
当用户选择了 School 的单选框时，显示 School 的下拉选项，隐藏 Company 的下拉选项
当用户选择了 School 的单选框时，显示 Company 的下拉选项，隐藏 School 的下拉选项 -->

之前一直在找button对象的那个圆点被按下的属性，没找到，就绑的onclick。

Day20 通过DOM改变HTML文档的元素的样式 | JS 事

任务1

阅读

编码

任务2

阅读

编码

猜你喜欢

热点阅读