JS修改属性,六种数据类型
JS修改属性
一般修改单个属性是通过JS修改的,比较方便。改多个属性通过css样式改更方便。
1.特殊:通过JS修改包含"-"符号的属性,例如margin-top
// 特殊 修改包含"-"符号的属性,例如margin-top
// oBox[1].style.margin-top="50px"; // 错误写法,js将“-”认成减号
有两种写法:
- // oBox[1].style.marginTop="50px"; // 1.驼峰写法
- oBox[1].style["margin-top"]="50px"; // 2.中括号括起来
2.普通属性 不含 ''-''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
<style>
div{
width: 100px;
/*height: 100px;*/ /*高度写这儿,弹不出属性*/
background: yellow;
}
</style>
</head>
<body>
<div style="height: 100px">测试JS修改属性</div>
<script>
var oBox=document.getElementsByTagName("div");
alert(oBox[0].style.height); // 弹出高度,只能 弹出行内属性
// 分别修改高度和宽度
// oBox[0].style.height="150px";
// oBox[0].style.width="150px"; // 同时修改高宽度
oBox[0].style.cssText="height:150px;width:150px"
</script>
</body>
</html>
效果: 之前 之后
js六大数据类型
<script>
/*
js六大数据类型
number——数字 在js里面的小数和整数统一都是数字 -2^53 -- 2^53 超出范围之后精度就会不准确
string——字符串
boolean——布尔值 true false
function——函数
undefined——未定义 一个变量声明之后没有赋值就是undefined
object——对象
在js里面null属于对象类型,但是它不具有很多对象的共性,所以很多资料将它归为单独一类数据类型null
*/
</script>
JS修改属性,六种数据类型的更多相关文章
- 原生JS的使用,包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较
一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...
- js修改input的type属性问题
js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- jsp——js事件修改属性样式的两种方法(直接赋值、修改属性)、验证表单符合某要求、阻止表单提交、告诉浏览器不要缓存
代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...
- js修改html中class属性
document.getElementById("tr").setAttribute("class","styleclass"); 其中 ...
- selenium web driver 使用JS修改input属性
selenium获取input时候,发现type=”hidden” 的input无法修改value,经牛人指点,可以使用js修改 首先html源文件如下,设置为text .hidden.submit ...
- js 六种数据类型的区别及bool 转换判断
一.bool型转换判断: 1.true 和 1 比较是相同,false 和 0 比较是相同(是 “==” 比较),因为内部会实现数据类型的 转化,将true 转换成1,将false 转换成0, js ...
- 使用原生JS 修改 DIV 属性
本例参考并改进自:https://www.jianshu.com/p/2961d9c317a3 大家可以一起学习!! <!DOCTYPE html> <html lang=" ...
- js六种数据类型
六种数据类型: undefined . boolean .string .number .object .function 效果地址:https://scrimba.com/c/cEedDGTd 代 ...
随机推荐
- opencv-python教程学习系列3-视频操作
前言 opencv-python教程学习系列记录学习python-opencv过程的点滴,本文主要介绍视频的获取和保存,坚持学习,共同进步. 系列教程参照OpenCV-Python中文教程: 系统环境 ...
- lamdba 性能测试 大数据内存查找
由于工作中需要对大量数据进行快速校验,试验采用读入内存List实体采用lamdba查找来实现. 实际需求:实际读入内存数据 50W条记录主集数据,还包含约20个子集,子集最大记录数300W条记录. ...
- API设计风格(RRC、REST、GraphQL、服务端驱动)
API设计风格(RRC.REST.GraphQL.服务端驱动) Web API设计其实是一个挺重要的设计话题,许多公司都会有公司层面的Web API设计规范,几乎所有的项目在详细设计阶段都会进行API ...
- Immutable集合
转自:https://blog.csdn.net/michaellufhl/article/details/6314333 大家都知道JDK提供了Collections.UnmodifiableLis ...
- 关于Hibernate性能优化之 FetchType=Lazy时查询数据
当表A和表B一对多的关系 对于A和B的实体类,设置FetchType=EAGER时,取A表数据,对应B表的数据都会跟着一起加载,优点不用进行二次查询.缺点是严重影响数据查询的访问时间. 解决办法Fet ...
- 【HAOI2014】贴海报
弱省中的弱省……原题: Bytetown城市要进行市长竞选,所有的选民可以畅所欲言地对竞选市长的候选人发表言论.为了统一管理,城市委员会为选民准备了一个张贴海报的electoral墙.张贴规则如下:1 ...
- MySQL Transaction--RC和RR区别
在MySQL中,事务隔离级别RC(read commit)和RR(repeatable read)两种事务隔离级别基于多版本并发控制MVCC(multi-version concurrency con ...
- JVM 详解
概念 数据类型 Java 虚拟机中,数据类型可以分为两类:基本类型和引用类型.基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了某个对象的引用,而不是对 ...
- ThinkPHP5 API 文档
ThinkPHP5 API 文档 有了这个还是相当的方便,可以快速查找每个组件的方法和接口. https://yangweijie.github.io/thinkphp-lts/index.html# ...
- 投行的码工 Dead-end job
发信人: icestonesy (无忧), 信区: Quant 标 题: 投行的码工怎么样? 发信站: BBS 未名空间站 (Sat May 16 23:25:00 2015, 美东) 最近看到不少 ...