js 基础属性+简易留言板

最新推荐文章于 2023-10-03 19:18:47 发布

原创最新推荐文章于 2023-10-03 19:18:47 发布 · 679 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

4 篇文章

订阅专栏

博客介绍了属性相关知识，包括属性定义、操作方式及注意事项，如属性名要符合变量命名规则。还提及元素的style属性及其他属性的读写操作。最后给出简易留言板的实现，包含获取元素、添加点击事件、获取输入框值、新增留言内容等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，属性

事物所具有的不可缺少的性质

利用属性可以描述一个对象的特性和功能

2，属性操作

增加属性、删除属性、改写属性、查找属性

3，操作属性的方式

点（。）

元素的自身属性，并且符合命名规则

中括号（[ ]）

属性名不符合命名规则，或者属性名存在变量中

4，注意事项

属性名要符合变量命名规则

5，元素的style属性

用来操作行间样式

样式名不符合命名规则

通过 [ ] 的方式操作

通过驼峰的方式（去掉 - ，- 后的首字母大写）

6，元素的其他属性

id、className、value、innerHTML以上属性都可以进行读写操作

innerHTML 获取当前元素下的所有字符

简易留言板

1、获取元素（输入框、按钮、列表）
*        输入框输入的内容，获取value
*        按钮添加事件，点击后新增留言
*        列表，放新增留言内容
*
*    2、给按钮添加点击事件
*
*    3、获取输入框的value
*
*    4、通过设置ul的innerHTML新增留言内容

<body>

<input type = "text" id = "text"/>

<input type = "button " id = "btn" value = "留言板"/ >

<ul id = "list"> </ul>

<script>

// 1、获取元素（输入框、按钮、列表）
window.onload = function(){
var text = document.getElementById('text');
var btn = document.getElementById('btn');
var list = document.getElementById('list');

// 2、给按钮添加点击事件

btn.onclick = function() {
// 3、获取输入框的value
console.log(text.value)
// 4、通过设置ul的innerHTML新增留言内容
console.log('在innerHTML之前：'+list.innerHTML);
list.innerHTML += '<li>'+ text.value +'</li>';
console.log('在innerHTML之后：'+list.innerHTML);
// 5、清空当前输入框的value
text.value = '';
}
}

</script>

</body>