Js基础7:表单元素属性（js表格属性）

bigegpt 2025-03-18 19:58 14 浏览

一、封装获取元素的方法

封装思想——函数封装——代码复用

 function get_id(id){
     // 这个函数是专门来通过id获取元素
     return document.getElementById(id)
 }
 
 function get_els(parentId, tagName){
     // 这个函数是专门来获取某个父标签范围内的某些标签
     return get_id(parentId).getElementsByTagName(tagName)
 }

二、表单元素属性

常用的表单元素包括 input、select、textarea、button等，下面我们学习这些表单元素中常用的属性。

value 用于获取和设置表单元素的内容
type 用于获取和设置input标签的类型
checked 复选框选中属性（true表示选中, false表示不选中）
disabled 用于禁用表单输入或选择操作

需求：点击按钮修改input的类型和内容

html和css代码

JavaScript代码

 var btnObj = document.getElementById("btn");
 btnObj.onclick = function () {
     //修改按钮的value属性
     //btnObj.value = "我是按钮我被修改了";
      this.value = "我是按钮我被修改了";
      this.type = "text";
      this.id = "btn2";//审查元素看到id也是可以被修改的
 }

需求：点击按钮修改单选框的值（性别男改成女）

html和css代码

 
 男
 女
 保密

JavaScript代码

 var btn1 = document.getElementById("btn1");
 btn1.onclick = function () {
     document.getElementById("rad1").checked = true;
 }

需求：点击按钮修改复选框的值（选中 #ck1 和 #ck2 ）

html和css代码

 
 吃饭
 睡觉
 打豆豆
 打篮球
 打足球
 敲代码

JavaScript代码

 var btn2 = document.getElementById("btn2");
 btn2.onclick = function () {
    document.getElementById("ck1").checked = true;
    document.getElementById("ck2").checked = true;
 }

需求：点击按钮禁止文本框输入

html和css代码

JavaScript代码

 // 需求：点击按钮时，禁用文本框
 //先根据id获取按钮,为按钮注册点击事件,添加事件处理函数
 var btn = document.getElementById("btn");
 btn.onclick = function () {
      //根据id获取文本框,设置disabled属性
      document.getElementById("txt").disabled = true;
 }

js获取最后一个元素

上一篇：Fabric.js 清空画布，甚至连画布元素也给你干掉
下一篇：js如何对元素可视区域进行判定（js判断元素是否可见）

Js基础7:表单元素属性（js表格属性）

相关推荐

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

服务器硬件RAID性能横评(2)（服务器常用raid技术）

Python教程:第9篇字符串基本操作

k8s中三种POD调度策略介绍 k8s pod间调用

Js基础7:表单元素属性（js表格属性）

相关推荐

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

Ceph运维手册(基于P版本)

Docker 命令大全（docker命令大全记录表）

替代Docker build的Buildah简单介绍

Docker Desktop安装使用指南:零基础教程

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

服务器硬件RAID性能横评(2)（服务器常用raid技术）

Python教程:第9篇 字符串基本操作

k8s中三种POD调度策略介绍 k8s pod间调用

Python教程:第9篇字符串基本操作