JS修改属性

一般修改单个属性是通过JS修改的，比较方便。改多个属性通过css样式改更方便。

　　1.特殊：通过JS修改包含"-"符号的属性，例如margin-top

// 特殊 修改包含"-"符号的属性，例如margin-top
// oBox[1].style.margin-top="50px";  // 错误写法，js将“-”认成减号
有两种写法：
  1. // oBox[1].style.marginTop="50px"; // 1.驼峰写法
  2. 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修改属性，六种数据类型的更多相关文章

  1. 原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

    一.前言 相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优 ...

  2. js修改input的type属性问题

    js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以 ...

  3. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  4. jsp——js事件修改属性样式的两种方法（直接赋值、修改属性）、验证表单符合某要求、阻止表单提交、告诉浏览器不要缓存

    代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...

  5. js修改html中class属性

    document.getElementById("tr").setAttribute("class","styleclass"); 其中  ...

  6. selenium web driver 使用JS修改input属性

    selenium获取input时候,发现type=”hidden” 的input无法修改value,经牛人指点,可以使用js修改 首先html源文件如下,设置为text .hidden.submit ...

  7. js 六种数据类型的区别及bool 转换判断

    一.bool型转换判断: 1.true 和 1 比较是相同,false 和 0 比较是相同(是 “==” 比较),因为内部会实现数据类型的 转化,将true 转换成1,将false 转换成0, js ...

  8. 使用原生JS 修改 DIV 属性

    本例参考并改进自:https://www.jianshu.com/p/2961d9c317a3 大家可以一起学习!! <!DOCTYPE html> <html lang=" ...

  9. js六种数据类型

    六种数据类型: undefined . boolean  .string .number .object .function 效果地址:https://scrimba.com/c/cEedDGTd 代 ...

随机推荐

  1. opencv-python教程学习系列9-程序性能检测及优化

    前言 opencv-python教程学习系列记录学习python-opencv过程的点滴,本文主要介绍程序性能检测及优化,坚持学习,共同进步. 系列教程参照OpenCV-Python中文教程: 系统环 ...

  2. HDU 2546：饭卡（01背包）

    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...

  3. L3-020 至多删三个字符 （30 分）

    给定一个全部由小写英文字母组成的字符串,允许你至多删掉其中 3 个字符,结果可能有多少种不同的字符串? 输入格式: 输入在一行中给出全部由小写英文字母组成的.长度在区间 [4, 1] 内的字符串. 输 ...

  4. 【JVM】jvm至jstack命令

    一.介绍 jstack是java虚拟机自带的一种堆栈跟踪工具.jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项&qu ...

  5. test20190320 全连（fc）

    题意 全连(fc) [题目背景] 还记得若干年前那段互相比较<克罗地亚狂想曲>的分数的日子吗? [题目描述] E.Space 喜欢打音游. 但是他技术不好,总是拿不到全连(Full Com ...

  6. Oracle 跨库 查询 复制表数据

    在目前绝大部分数据库有分布式查询的需要.下面简单的介绍如何在oracle中配置实现跨库访问. 比如现在有2个数据库服务器,安装了2个数据库.数据库server A和B.现在来实现在A库中访问B的数据库 ...

  7. 理解git

    为了真正了解git,我们从底部.底层开始,了解git核心,知其然并知其所以然. 为什么要进行版本控制呢? 因为编写文件不可能一次到位,文件总是有不同的状态需要保存下来,方便以后出错回滚. git 是目 ...

  8. mysql之 远程连接 mysql 很慢，本地连接 mysql 很快 （skip-name-resolve）

    症状:,远程连接 mysql 很慢,但是 本地连接 mysql 很快, ping 和 route 网络通信都是正常的. 解决:mysql 的配置文件中增加如下配置参数:[mysqld]skip-nam ...

  9. JFrame 与 Frame

    JFrame是Frame的子类 Frame is part of java.awt package and exists since JDK1.0. JFrame is part of javax.s ...

  10. Angular 4 组件间的通信

    一.输入属性(父组件与子组件通信) 1. 创建工程 ng new demo1 2.创建order组件 ng g component order 3. 在order组件里定义输入属性 order组件的h ...