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. 洛谷 1020：导弹拦截（DP，LIS）

    题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...

  2. UVA 10815：Andy's First Dictionary（STL）

    题意:给出一段英文,里面包含一些单词,空格和标点,单词不区分大小写,默认都为小写.按照字典序输出这些单词(这些单词不能有重复,字母全部变成小写) stringstream:包含在头文件#include ...

  3. arduino 配置 esp8266

    在连接之前,先把程序下载到arduino中,很简单,就是定义了软口.如果中间要改动程序,要把rx和tx的连线去掉,不然下载程序可能失败. ; ; void setup() { pinMode(rx,I ...

  4. 剑指offer-特定二维数组中查找一个元素是否存在-二分搜索-二维数组

    int [][] array ={ {1,2,8,9}, {2,4,9,12}, {4,7,10,13}, {6,8,11,19} }; 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都 ...

  5. 剑指offer-矩形覆盖-斐波那契数列(递归，递推)

    class Solution { public: int rectCover(int number) { if(number==0 || number==1||number==2) return nu ...

  6. Linux内核电源管理综述

    资料:http://blog.csdn.net/bingqingsuimeng/article/category/1228414http://os.chinaunix.net/a2006/0519/1 ...

  7. 在Win7下新建库并修改图标

    win7中在库中添加桌面方法详解 1.在空白处,鼠标右键选择新建——库. 2.命名为桌面,然后选择桌面. 3.鼠标右键选择属性. 4.点击包括文件夹. 5.选择桌面,点击包括文件夹按钮. 6.点击确定 ...

  8. 线性模型的fit，predict

    线性模型的fit其实一个进行学习的过程,根据数据和标签进行学习:predict则是基于fit之后形成的模型,来决定指定的数据对应于标签(y_train_5)的值. 下面的是手写字母判断是否为“5” s ...

  9. MYSQL的空间查询(转帖)

    SELECT x(location),y(location) FROM frddata.points; 本文将向各位介绍如何使用MySql5.x中的空间数据库,并展示一下它高效的性能(前提是正确使用) ...

  10. 如何使用button在tab中新建打开一个链接页

    在APPBOX某页中如何使用button按钮打开一个新的链接页.比如说百度.谷歌等 在后台的单击事件中使用以下语句即            string url = "DownloadIma ...