js 操作元素属性、操作元素样式、display(none、block)
2024-06-02 02:08:21
js操作元素属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="Keywords" content="关键字,关键词"><meta name="Description" content="描述和简介"><title>Title</title><style type="text/css">*{margin:0;padding:0;}body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}a{text-decoration:none;}img{border:none;}ol,ul{list-style:none;}</style>
</head>
<body><!--js中的属性1: 可读可写获取原有的内容设置新的内容2: 可读不可写获取原有的值时length2: 属性操作1: 合法属性的操作直接点操作(可读可写)class比较特殊,需要操作calssName不能直接操作不合法属性,如果直接操作,他将变成js自定义属性直接在等号后面赋值获取元素之间的区别1: 获取集合(动态变化的)集合不是一个固定的东西更改值之后,就不在指向原来的元素length同时会发生改变用一次获取一次动态方法(class 标签名 选择器 name)2: 获取单个(静态的)改变的都是同一个元素,不是集合获取和修改都是对一个对象进行操作静态方法(id)2: 不合法属性的操作(指标签里面的自定义属性)1: 获取属性 getAttribute2: 设置 / 修改属性和值 setAttribute3: 移除属性 removeAttribute3: 中括号的使用 []1: 可以直接获取合法属性,在中括号中需要引号2: 获取集合中的第几个元素3: 代替大多数的点,只要把点后面的属性值变成字符串就可以了获取已知属性,但是属性没有办法直接点或者属性是变量 就用[]--><div id="box" class="wrap" title="小花" dachui="大锤" style="height:100px;width:200px;">女生的特点: 喜欢逛吃逛吃逛吃,呜呜呜呜</div><div class="wrap"></div><div class="wrap"></div><div class="wrap"></div><div class="wrap"></div><script>var oBox = document.getElementById("box");var aBox = document.getElementsByClassName("wrap");
/* oBox.innerHTML = "总结: 火车";alert( oBox.innerHTML );alert( oBox.innerHTML = "总结: 火车" );aBox.length = 4;var aa = aBox.length;alert(aa);//5*//* oBox.id = "mojing";var x = oBox.id;//alert(oBox.id);oBox.className = "aa";var y = oBox.className;alert(y);var z = oBox.title;//alert(z);var zz = oBox.dachui;//这种写法属于js的自定义属性//alert(zz);*//*alert(oBox.id);oBox.id = "mojing";alert(oBox.id);alert(oBox.innerHTML);alert(aBox.length);//打印5aBox[0].className = "bb";aBox[0].innerHTML = "魔镜魔镜,谁是世界上最爱笑的女生!";alert(aBox.length);//打印4*//*//获取标签中的自定义属性 getAttribute//var x = oBox.getAttribute("dachui");//alert(x);alert( oBox.getAttribute("id") );//设置自定义属性和值 setAttributeoBox.setAttribute("xiaotiantian" , "小甜甜");oBox.setAttribute("dachui" , "xiaotiantian");//移除自定义属性 removeAttributeoBox.removeAttribute("dachui");oBox.removeAttribute("xiaotiantian")*/
/*//oBox.id = "wrap";oBox["id"] = "wrap2";//不推荐使用这种方式获取aBox[0].className = "aa";*/var dachui = 3;oBox.dachui = 2;//js的自定义属性//alert(dachui);var x = "width";alert(oBox.style[x]);</script>
</body>
</html>js操作元素样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="Keywords" content="关键字,关键词"><meta name="Description" content="描述和简介"><title>Title</title><style type="text/css">*{margin:0;padding:0;}body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}a{text-decoration:none;}img{border:none;}ol,ul{list-style:none;}#box{width:200px;}#css1.aa{width: 100px;height:100px;background: pink;}</style>
</head>
<body><!--js操作元素样式1: 样式 外部 内部 行内时不采用后台操作,纯js不能修改外部样式,只能修改内部和行内样式2: 修改方式1: 拼接内部样式(很麻烦,考虑优先级,必须知道id的值是什么,不常用)2: 行内样式对象.属性.属性 = "数值";oBox.style.cssFloat = "";//火狐oBox.style.styleFloat = "";//ie获取样式:只能获取行内样式,不能获取内部和外部的样式复合属性: 去掉横杆,然后采取驼峰命名法3: class方式修改样式--><div id="box" style="width:100px;height: 100px;background: pink;float:left;">hello wold!</div><div id="css1" style="margin-left:50px;"></div><script>var oBox = document.getElementById("box");var oCss = document.getElementById("css1");//alert(oBox);
/* var oCss = document.getElementById("css");oBox.style.cssText = "width: 100px;height: 100px;border:1px solid red;";*/oBox.style.width = "300px";oBox.style.float = "right";oCss.className = "aa";//oBox.innerHTML = oBox.innerHTML + "你好,是你的益达";oBox.innerHTML += "你好,是你的益达";oCss.style.marginLeft = "100px";</script>
</body>
</html>
display(none、block)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="Keywords" content="关键字,关键词"><meta name="Description" content="描述和简介"><title>Title</title><style type="text/css">*{margin:0;padding:0;}body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}a{text-decoration:none;}img{border:none;}ol,ul{list-style:none;}#box{position: relative;}#box img{position: absolute;top: 0;left: 0;display: none;}#box #img1{display: block;}</style>
</head>
<body><div id="box"><img id="img1" src="data:images/1.jpg" alt=""><img id="img2" src="data:images/2.jpg" alt=""></div><script>var oImg1 = document.getElementById("img1"),oImg2 = document.getElementById("img2");oImg1.onclick = function (){this.style.display = "none";oImg2.style.display = "block";};oImg2.onclick = function (){this.style.display = "none";oImg1.style.display = "block";};</script>
</body>
</html>
js 操作元素属性、操作元素样式、display(none、block)相关推荐
- js第7章DOM案例：获取操作的元素、元素内容操作、元素属性操作、classList的使用、获取节点、节点追加、删除节点和节点属性
目录 1.获取操作的元素 document对象的方法 document对象的属性 Element对象的方法和属性 2. 元素内容操作 3.元素属性操作 4.classList的使用 5. 获取节点 6 ...
- jQuery（六）元素属性操作和jQuery循环
文章目录 jQuery元素属性操作 jQuery循环 练习-手风琴式展示图片 jQuery元素属性操作 html() //取出或设置元素内包裹的内容 var $box = $('.box');aler ...
- dom元素属性操作---属性获取或属性设置
目录 一.属性的获取 二.设置类属性 设置类属性 三.dom元素的class操作 1. 类添加的方法 2. 返回元素的class列表 3. 检测元素是否具有某个类 4. 输出类总共有几个 5. 移除类 ...
- js初识、JS基础交互、JavaScript 元素操作
js初识 js外链引入 外链引入.js 通过script标签的src属性引入外部js文件在外部新建一个后缀名为js的文件注意:用于引入外部js文件的script标签,就不要再写其他的js代码,不会执行 ...
- DOM操作之属性和样式操作
在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法. 在开始操作前,我们需要先在html中添加如下代码,后面所 ...
- js系列教程7-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
- jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
- selenium 页面经常改变元素_selenium用jquery改变元素属性
一.jQuery 语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 1.基础语法: $(selector).action() 选择符(selector)即," ...
- JQueryDOM之属性操作
属性操作 关于属性操作,我们这里来讲两个方法:attr()和removeAttr() attr(): 能够获取元素属性.也能够设置元素属性 当attr(para1)方法有个参数时候用于获得当 ...
- CSS笔记二-选择器、背景相关属性、元素显示模式、CSS三大特性、chrome调试工具、PXcook使用
一.复合选择器 1.后代选择器 根据HTML标签的嵌套关系,选择父元素后代中满足条件的子元素: 选择器语法:选择器1 选择器2 {css} 结果:在选择器1中所找到标签的后代(儿子.孙子.重孙子... ...
最新文章
- GPU服务器选购指南-思腾合力篇
- 都在抢论文第一作者，怎么解决？
- 使用Python在Selenium WebDriver中获取WebElement的HTML源代码
- Could not resolve the package 'english_words' in 'package:english_words/english_words.dart'
- springboot导入项目依赖报错_最详细的 Spring Boot 多模块开发与排坑指南
- C89,C99: C数组结构体联合体快速初始化
- JAVA笔记:double四舍五入并保留两位小数的方法
- linux基本命令与终端操作、linux命令英文全称解释、ls clear cd pwd cat touch cp rm rmdir mkdir mv file find grep sudo su
- 11g RAC 安装后所需修改事项
- oracle服务没有了 原因,一例oracle服务无法启动的原因及解决方法
- SystemFile
- 4.8 数值分析: 牛顿迭代法及收敛分析
- android 4.4.2海信电视,ROOT海信电视Android4.0的详细步骤
- 论保留地址与私有地址
- conda安装GPU版pytorch，结果却是cpu版本[找到问题根源，从容解决]
- 图片转换为 latex 公式，识别图片中Latex公式，支持数学公式，化学公式，物理公式和生物公式，附Java代码和测试效果
- 金融行业IT运维现状问题和发展方向
- 任你和QQ陌生人聊天
- Java设计模式之建造者模式（精髓版）
- android 加速度计算公式,android – 使用加速度计计算旋转矩阵