Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >js简单改变页面的属性

js简单改变页面的属性

作者头像
十月梦想
发布于 2018-08-29 02:57:47
发布于 2018-08-29 02:57:47
7.2K0
举报
文章被收录于专栏:十月梦想十月梦想

前面简单介绍了页面获取元素,下面来说一下获取页面的属性.

对象.class='设置的class值'

对象.value='设置input的value值'

对象.src='设置img的图片路径'

设置文档的标题

document.title='设置页面标题';

通过这种方式只能获取部分的属性值.


下面说一下自行设置各类属性以及属性值

对象.setAttribute('属性名','属性值')

例如通过id抓取id为header的元素赋值给变量head

head.setAttribute('name','heha')//给head添加属性name为heha

head.setAttribute('width','500px')//给head添加属性width为500px

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-1-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Html.js——范围判定】偷梁换柱(蓝桥杯真题-2332)【合集】
提示:可以使用 Object.defineProperty 或者 Proxy 对 person 对象进行处理。 完成后,最终页面效果如下:
Rossy Yan
2025/02/02
1140
【Html.js——范围判定】偷梁换柱(蓝桥杯真题-2332)【合集】
JavaScript之Dom、事件,案例
📦个人主页:楠慧 🏆简介:一个大二的科班出身的,主要研究Java后端开发 ⏰座右铭:成功之前我们要做应该做的事情,成功之后才能做我们喜欢的事 3、JavaScript DOM 3.1、DOM介绍 DOM(Document Object Model):文档对象模型。 将 HTML 文档的各个组成部分,封装为对象。借助这些对象,可以对 HTML 文档进行增删改查的动态操作。 3.2、Element元素的获取操作 具体方法 代码实现 <!DOCTYPE html> <html lang=
楠羽
2022/11/18
1.4K0
JavaScript之Dom、事件,案例
手把手教你使用JavaScript打造一款扫雷游戏
扫雷大家都玩过,今天我们就是用JavaScript来打造扫雷游戏。废话不多说,直接看下效果;
前端皮皮
2022/08/17
7240
手把手教你使用JavaScript打造一款扫雷游戏
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
上一博文种讲解了JavaScript基础的ECMAScript,包括基本语法和部分对象,本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件,后文中有对应的实战练习。
Winter_world
2020/09/25
2.4K0
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
JavaScript进阶内容——DOM详解
JavaScript使我们有能力创建动态页面,而事件就是被JavaScript所侦测到的行为。
秋落雨微凉
2022/10/25
1.6K0
JavaScript进阶内容——DOM详解
20.DOM
定义 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口。 查找元素 1.直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签
zhang_derek
2018/04/11
7930
【Java Web_05】DOM
一、DOM概述 1. 什么是DOM * Document Object Model 文档对象模型 2. 核心DOM ① Document:文档对象 ② Element:元素对象 ③ Attribute:属性对象 ④ Text:文本对象 ⑤ Comment:注释对象 ⑥ Node:节点对象,其他5个的父对象 二、Document 1. 获取Element对象 ① getElementById() 根据id属性值获取元素对象。id属性值一般唯一 ② getElementsByTagName()
用户8250147
2021/02/04
8940
【Web APIs】JavaScript 操作元素 ⑤ ( 修改元素样式属性 | 行内样式操作 - element.style | 类名样式操作 | 类列表样式操作 )
在 【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 ) 博客中介绍了 使用
韩曙亮
2024/08/09
4280
【Web APIs】JavaScript 操作元素 ⑤ ( 修改元素样式属性 | 行内样式操作 - element.style | 类名样式操作 | 类列表样式操作 )
Web前端学习 第2章 网页重构4 css选择器和常用属性
CSS(层叠样式表)控制着网页的样式,例如我们之前编写的HTML文件,文字的颜色都是默认的黑色,如果希望将文字设置成其他颜色,就需要CSS了,可以在HTML文件中填写如下代码,即可把一个h1标签的文字设置成红色;
学习猿地
2020/06/12
4740
Web前端学习 第2章 网页重构4 css选择器和常用属性
【学习笔记】JavaScript
let是局部变量(在他所在的代码块可用),const是常量,var是全局变量(前两个是ES6的,因为前面两个更加严谨,var被抛弃(貌似))
Livinfly
2022/10/26
5K0
3-DOM
将标记语言文档(HTML,XML…)的各个部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD动态操作
Ywrby
2022/10/27
1.6K0
【Html.js——功能实现】为图片添加景深效果(蓝桥杯真题-2161)【合集】
我们看到,图片的近处是模糊的,而远处是清晰的,我们把这种效果称为景深。 CSS 中有一个属性可以支持元素的平移、旋转、缩放或倾斜。同时,CSS 中还有一个属性可以将模糊或颜色偏移等图形效果应用于元素。大家可以试着通过 MDN 或者其他方式查找哪些 CSS 属性可以满足上述需求。 通常,我们会在 CSS 中对需要应用上述效果的元素直接书写相应的属性值。但是,如何根据场景动态修改上述属性值也是日常业务中常见的需求。 本节挑战,我们为大家提供这样的场景,希望大家能通过 JS 的方式为图片动态添加景深效果。
Rossy Yan
2025/01/24
2110
【Html.js——功能实现】为图片添加景深效果(蓝桥杯真题-2161)【合集】
09Document对象
什么是Document对象 document对象在DOM中代表了HTML页面 document也是DOM解析HTML页面的入口。 定位页面元素 定位页面元素常用的方法: 方法名 参数传入 作用 返回类型 示例 getElementById() ID名 通过页面元素的id属性值定位元素 单个节点,既是Node也是Element类型 getElementById('p1') getElementsByName() name 通过页面元素的name属性值定位元素 NodeList getEleme
Dreamy.TZK
2020/04/13
5550
DOM 又是个什么鬼?
  DOM(Document Object Model 即:文档对象模型),是一项 W3C 标准,是针对 HTML 和 XML 的一个 API(应用程序接口)。它将 web 页面和 JavaScript 连接起来,允许程序和脚本动态地访问、更新文档的内容、结构和样式。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将 web 页面和脚本或程序语言连接起来。
Demo_Null
2020/09/28
1.4K0
DOM 又是个什么鬼?
Javascript(2)-js进阶
备注:如果父元素进行了relative/absolute定位,offsetTop/offsetLeft就是相对父元素的顶部和左边的距离,如果父元素默认定位,就是相对浏览器窗口的距离
Python攻城狮
2018/08/23
1.5K0
Javascript(2)-js进阶
再来利用java学学javaweb——–html+css+ JavaScript[通俗易懂]
​ * 表单项标签: * input:可以通过type属性值,改变元素展示的样式 * type属性: * text:文本输入框,默认值 * placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息 * password:密码输入框 * radio:单选框 * 注意: 1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值 3. checked属性,可以指定默认值 * checkbox:复选框 * 注意: 1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值 2. checked属性,可以指定默认值
全栈程序员站长
2022/09/14
2.5K0
前端之BOM和DOM
BOM(Browser Object Model)浏览器对象模型,它使得JS能够与浏览器进行‘对话’(交互,通过JS对页面内容进行操作)。
GH
2019/12/16
2.9K0
前端之BOM和DOM
JavaScript离别之作——HTML元素操作
document对象提供了一些用于查找元素的方法,利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。
全栈程序员站长
2022/09/09
1.3K0
JavaScript离别之作——HTML元素操作
JavaScript之DOM
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
菲宇
2019/06/13
7540
JavaScript之DOM
【如果你要学JS XIII】——实现放大镜效果、client&scroll属性、固定侧边栏
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列 的相关属性可以动态的得到该元素的边框大小、元素大小等。
像素人
2023/12/26
6530
【如果你要学JS XIII】——实现放大镜效果、client&scroll属性、固定侧边栏
相关推荐
【Html.js——范围判定】偷梁换柱(蓝桥杯真题-2332)【合集】
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档