javascript第三天---标签内的属性和数组
操作标签内的样式
<div id="box" style="width:100px;height: 100px;background: red;"></div><script type="text/javascript">var oBox = document.getElementById('box');oBox.style ="border:10px solid yellow;"
</script>
这样只会覆盖原来的样式,不会添加样式
- 通过点语法获取到的style是cssstyleDeclaration对象
var myStyle = oBox.style.cssText;
获得完整的css文本,同于一次修改多条属性。box.style.cssText = "background-color:green;"
- 通过style.cssText获取完整的
- 文本字符串的拼接
+两侧如果有任意一侧不是数值了,那么就开始字符串的拼接console.log("我"+"你");
结果是我你
oBox.style.cssText = oBox.style.cssText + "border:10px solid yellow;";
但是在ie浏览器里面,显示的样式表最后没有分号,height:100px;background:red
所以拼接的话就变成了height:100px;background:redborder:10px solid yellow;
所以可以变为oBox.style.cssText = "border:10px solid yellow;"+oBox.style.cssText;
但是操作整个css样式,一个会有兼容问题,一个是会覆盖。所以不用这种方法 可以用来给标签添加类名 box.className += " btn"
注意的是加类名前面要加空格
- +=
var a =1;
a =a+1;
a += 1;
box.num = box.num +1;
box.num+=1;
box.num++;//只能每次递增一时使用
代表的意思是一样的,所以oBox.style.cssText += "border:10px solid yellow;"
与oBox.style.cssText = oBox.style.cssText + "border:10px solid yellow;";
意思是一样的,不能用+=
- 只想获取stle的一个精准属性
通过style.width等手段获取具体的样式值,注意是字符串,如果类似background-color,则去掉连接符后边的单词首字母大写(webkitTransform)console.log(oBox.style.backgroundColor);
- 设置style的属性,点语法直接赋值,注意被赋的值是字符串加引号
oBox.style.height = "200px";
- float 在低版本ie678下使用styleFloat 在高版本ie和其他浏览器
oBox.style.styleFloat = "right";
使用cssFloat;oBox.style.cssFloat = "right";
最好使用类名使用<style>
里写
操作内部样式表
需要注意的是,通过console.log(oBox.style.cssText);
是获取不到#box{ width: 100px; height: 100px; background-color: red; }
里的外部样式表,但是可以读取内部样式表的内容,修改内部样式
- 方法一
<style type="text/css" id="myStyle">
var myStyle = document.getElementById('myStyle'); console.log(myStyle);
是可以获取里面的样式的,通过inner.HTML表示获取元素内部的html,会无情的覆盖原有的元素,可以输出html
赋值元素内部的html ele.innerHTML = “<h3>123</h3>”;
myStyle.innerHTML = myStyle.innerHTML + "#box{width:300px;}";
但是不要这样操作
oBox.onclick = function () { oBox.innerHTML = oBox.innerHTML + "<h3>567</h3>"; }
可以通过不断的点击获得大量的<h3></h3>
- innerText 表示获取元素内部的文本
赋值 元素内部的html ele.innerText = “今天”;会无情的覆盖原有的元素,不会输出我们的html
<div id="box"><h3>123</h3>
</div>
<script type="text/javascript">oBox.innerText = "今天天气很好";
</script>
结果是没有了<h3>
对象的自定义属性
<script>var obj = {};console.log(obj);obj.name = "lisi";console.log(obj);
</script>
通过点语法属性给空对象加了自定义属性
自定义属性不能直接通过点操作要修改通过setAttribute来操作
setAttribute("属性名",“值”)
box.setAttribute("fy","风雨")
数组
可以存储任意的数据类型 数组长度arr.length
length是数组的一个属性 比如
<div class="box">123</div>
<div class="box">123</div>
<div class="box">123</div>
<div class="box">123</div>
<script>
var box = document.getElementsByClassName("box");
</script>
console.log(box.length)结果是4
长度 个数 最后一个数据的末尾的逗号可加可不加[1,2,3] [1,2,3,]
- 数组取值
用在这个地方
<div class="box">123</div>
<div class="box">123</div>
<div class="box">123</div>
<div class="box">123</div>
<script>
var box = document.getElementsByClassName("box");
</script>
此时box是个集合,而操作style必须是一个具体的元素,这时可以用box.0 但是后面是数字不能用点,在js里代表的是1.3,所以可以用 box[0]
代表第一个box 数组的长度-1是序号的最大值
var arr = [123,{},[],function () {}];console.log(arr);
结果是从0开始排序。序号是索引,索引是数值型。取值使用arr[索引号] console.log(arr[0]);
代表取第一个值
- 数组的赋值 arr[索引] = “新值”
arr[0] = "进";
- 数组新增一个值(不用函数实现)arr[索引] = “新值”
如果只定义arr[8]="iii";那么中间以,
表示 - 数组空位 例如
[,,]
长度为2 空位取值 占长度 - 删除数组的元素
delete arr[索引]
留下了数组空位 - 数组的套嵌
var arr = [123,{},[1,2,3,[4,5,6]],function () {}];console.log(arr[2][3][1]);
结果是数字5
[]的语法
<div id="box" style="width: 50px;"><h3>123</h3>
</div>
<script type="text/javascript">var oBox = document.getElementById('box');// var myText = oBox.innerHTML;var myText = oBox["innerHTML"];console.log(myText);
</script>
obj["字符串"]可以代替obj.字符串,里面的字符串可以驼峰可以不驼峰
var a = "name";obj.name = "lisi";// console.log(obj.a);undefinedconsole.log(obj[a]);box.style.width = "200px";box["style"]["width"] = "200px";
javascript第三天---标签内的属性和数组相关推荐
- Spring系列-bean标签内autowire属性应用
文章目录 0.前言 1.autowire属性介绍 1.1.autowire官方介绍 1.2 autowire 理解 2.autowire属性应用范例 2.1.byName 方式使用 2.2.byTyp ...
- vscode标签内属性代码自动换行问题
每次使用的时候只要标签内的属性都自动换行很烦,解决后 解决方法: 1.在打开的vue文件中鼠标右键选择使用...格式化文档 2. 在头部的弹出框选择配置默认格式化程序-----vetur 配置完成后 ...
- 正则匹配html标签和内容,正则匹配HTML标签(不保留内容和保留内容、过滤标签的的属性)...
1.匹配双标签(包括内容),过滤标签,不保留内容. var reg1 = /]*>(.|\n)*/gi; var str1 = '我是被删除的123123'; console.log(str1. ...
- 1.1 css style 样式定义:行内 style 属性、单页 <style> 标签、多页 <style> 标签
1.1 style 样式定义:行内 style 属性.单页 <style> 标签.多页 <style> 标签 文章目录 1.1 style 样式定义:行内 style 属性.单 ...
- 第二章 网站开发基础之HTML教程 - 三、HTML及网页相关的知识点:img图片标签的宽度属性(width)和高度属性(height)
(二)img图片标签的宽度属性(width)和高度属性(height) 归纳起来讲,img图片标签的宽度属性(width)和高度属性(height)在指定值时,会有四种情况. 1.通常情况下填写的是: ...
- [置顶] 深入浅出Javascript(三)创建自定义对象以及属性、方法
怎么样创建一个对象? 利用Object创建自定义对象 JavaScript能够自定义对象来扩展程序的功能,不仅如此,它还能扩展JavaScript提供的内置对象,新增内置对象的属性或方法 例如下面代码 ...
- python描述符魔术方法_学习笔记-Python基础9-面向对象编程OOP-类的成员描述符(property)、类的常用内置属性、类的常用魔术方法、类和对象的三种方法...
一.类的成员描述符(property) 类的成员描述符是为了在类中,对类的成员属性进行相关操作而创建的一种方式,大部分属于数据清洗 属性有三种操作:get获取属性值.set修改或添加属性.delete ...
- 前端开发 html第二课 自结束标签 注释 标签中的属性 文档声明 进制 字符编码 文档使用 VScode 实体 meta标签 语义化标签 块元素和行内元素 布局标签
1 自结束标签 标签一般成对出现,但是也存在一些自结束标签 如: 多"/"和没有"/"区别不大 2 注释 注释的作用: 注释中的内容会被浏览器忽略,不会在网页中 ...
- 前端小技巧:javascript 获取标签中的属性 对指定标签中的属性进行操作
javascript 标签中指定属性值的更改与获取 适用于基本标签 <input><i><a>等基本标签 引用jQuery,两种方式 使用下面的input标签为例子 ...
最新文章
- 小团队如何玩转物联网开发?
- postgresql数据库的数据导出
- LinkedBlockingQueue 解析
- LOJ 2546 「JSOI2018」潜入行动——树形DP
- raid5和raid6对比
- PageRank行将过时 搜索引擎遭遇范式转移
- 淘汰算法LRU是什么?
- python数据统计代码_Python 数据的累加与统计的示例代码
- ubuntu下inotifywait实现目录、文件监控【包含子目录】
- 按 字节截取分别以GBK 和 utf-8 编码的 字符串的java程序。
- 神秘组织正在运行数百个恶意 Tor 中继
- 机器视觉:远心光学探秘
- Linux 下安装Postgresql
- 通过windows的超级终端连接华为交换机
- 傻瓜式安装卸载office
- 51Gif.net上的闪图制作工具
- 232串口计算机口电压,如何从PC机RS-232串口获取电源的简单方法详细说明
- 浪潮服务器u盘安装系统_浪潮服务器系统安装怎样从光驱引导
- springboot毕业设计 基于springboot家教预约网站系统毕业设计设计与实现参考
- 【附源码】计算机毕业设计java综合众筹网站设计与实现
热门文章
- golang图片属性orientation在image.Decode后丢失,导致图片上传后旋转
- cartographer建图,重定位及发布消息结构为nav_msgs::Odometry的odom话题
- python区间分布统计_常见概率统计分布及Python实现
- 怎样批量查询中通快运物流并分析出提前签收的单号
- C语言中指针*p、p以及p之间的区别以及*p和**p的区别
- 用html制作表白网站制作 超炫酷的七夕情人节表白网页代码
- php 浏览商品足迹,iwebshop调取浏览足迹方法
- 51单片机程序加密c语言,51单片机24C04密码锁(C程序+Proteus仿真)
- 乐鑫Esp32学习之旅⑦ esp32上利用GPIO中断做一个按键的短按和长按的回调事件,再也无须担心触发源。(附带Demo)
- iOS 学习之旅 - OC 篇