Dom样式操作-属性操作

1. 对样式进行操作：

1) 以样式（C1，C2等）为最小单位进行修改。

className,

classList, (以列表形式获得)

　　classList.add（"C2"）, classList.remove("C1")

2) 以某个样式作为单位进行修改。（可以只修改颜色/字体/背景等，可以只修改C1下面的color属性。）下面的例子就是增加/修改了style里面的fontSize属性。

obj=document.getElementById("i1");

obj.style.fontSize='16px'; obj.style.backgroundColor='red';

在CSS中是以 font-size 的 "-" 来连接的，在JS中，把- 变成大写的字母开头就可以了。驼峰式命名。

2.属性操作：

对某个标签中的某个属性做操作。

obj.setAttribute('XXXXXX','alex');

obj.removeAttribute('value'); 去掉了value关键字-值

obj.attributes 获取所有的属性。

3.创建标签并添加到HTML中。

1---字符串形式

2---对象的方式 document.createElement('div')

第1种创建标签的方法-实例：使用字符串的方法进行创建。参数传的是字符串。

把新创建的标签添加到了当前i1标签的底部了。

document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);

坑：var tag="<input type='text'/>"; 如果'text'这里的单引号写成双引号，则程序会报错。

正确写法如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" onclick="AddEle();" value="+"/>

    <div id="i1">

        <input type="text"/>

    </div>

    <script>

        function AddEle(){

        //创建一个标签，将标签添加到i1里面

        var tag="<input type='text'/>";

        document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);

        }

    </script>

</body>

</html>

运行结果：每点击一下，增加一个text文本框。

4. <hr/> 是分割线

注意：第一个参数只能是，这样就能实现把标签插入到不同的位置。

'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd':分别代表大哥，小弟，第一个大儿子，最后一个小儿子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" onclick="AddEle();" value="+"/>

    <div id="i1">

        <input type="text"/>

        <hr/>

    </div>

    <script>

        function AddEle(){

        //创建一个标签，将标签添加到i1里面

        var tag="<input type='text'/><hr/>";

        document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);

        }

    </script>

</body>

</html>

效果：

5. 第2种创建标签的方法-实例：通过对象的方法来创建。参数传的是标签对象。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" onclick="AddEle1();" value="+"/>

    <input type="button" onclick="AddEle2();" value="+"/>

    <div id="i1">

        <input type="text"/>

        <hr/>

    </div>

    <script>

        function AddEle1(){

        //创建一个标签，将标签添加到i1里面

        var tag="<input type='text'/><hr/>";

        document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);

        }

        function AddEle2(){

        //创建一个标签，将标签添加到i1里面

        var tag=document.createElement('input'); //创建了一个input标签

        tag.setAttribute('type','text');

        tag.style.fontSize='16px';

        tag.style.color='red';

        document.getElementById('i1').appendChild(tag);

        }

    </script>

</body>

</html>

运行效果同上。

6. 将input标签放到P标签里面了。在input标签的外面再包裹一个P标签。

createElement：给父亲（当前标签）创建新标签。

appendChild：给父亲（当前标签）增加儿子。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" onclick="AddEle1();" value="+"/>

    <input type="button" onclick="AddEle2();" value="+"/>

    <div id="i1">

        <input type="text"/>

        <hr/>

    </div>

    <script>

        function AddEle1(){

        //创建一个标签，将标签添加到i1里面

        var tag="<input type='text'/><hr/>";
　　　　　//注意：第一个参数只能是"beforBegin","afterBegin","beforeEnd","afterEnd"

        document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);

        }

        function AddEle2(){

        //创建一个标签，将标签添加到i1里面

        var tag=document.createElement('input');

        tag.setAttribute('type','text');

        tag.style.fontSize='16px';

        tag.style.color='red';

        var p=document.createElement('p');

        p.appendChild(tag);

        document.getElementById('i1').appendChild(p);

        }

    </script>

</body>

</html>

运行结果：刚才设置的样式也已经生效了。

7. 提交表单：

<form>

</form>

通过div标签也可以提交表单。把a标签换成div标签，借助于JS，也可以提交表单。任何标签通过DOM都可以提交表单。

document.getElementById('form').submit() 实际上是获取了一下form表单里面的submit方法。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form id="f1" action="http://www.oldboyedu.com">

        <input type="text"/>

        <input type="submit" value="提交"/>

        <a onclick="submitForm();">提交吧</a>

    </form>

    <script>

        function submitForm(){

            document.getElementById('f1').submit()

        }

    </script>

</body>

</html>

运行结果，一点击就可以提交了。

8. 其它

console.log                 输出框

alert                       弹出框

v=confirm(信息)              确认框 点“确定”将返回true，点“取消”将返回false，可以在console.log(v)里面查看效果。

// URL和刷新

location.href               获取当前页面的URL

location.href = "url"       重定向，设置新的URL，相当于跳转

location.reload()           重新刷新

// 定时器

var obj=setInterval(function(),5000) 多次定时器(定时器一直执行)

clearInterval(obj)                   清除多次定时器

var obj2=setTimeout(function(){},4000) 单次定时器（定时器只执行一次）用于在指定的毫秒数后调用函数或计算表达式。

clearTimeout(obj2)                     清除单次定时器

示例1：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="text"/>

    <script>

        alert(123);

    </script>

</body>

</html>

效果：

示例2：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="text"/>

    <script>

        var v=confirm('真的要删除吗？');

        console.log(v);

    </script>

</body>

</html>

效果图：v 代表的是返回值，如果点确定的话，v=true; 否则v=false;

示例3

location.href: 获取当前的url

location.href="http://www.baidu.com" 跳转到新的页面

location.href=location.href 或者 location.reload() 页面刷新

9. var obj = setInterval( (function){ },5000)； //定时器一直在执行

　clearInterval(obj); //把定时器清除了

　setTimeout(); // 定时器只执行一次

示例：执行一次就清除了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="text"/>

    <script>

        var obj=setInterval(function(){

        console.log(1);

        clearInterval(obj);

        },1000);

    </script>

</body>

</html>

运行效果：

setTimeout 示例1，代表5秒之后才执行console.log语句，而且只执行一次。

10. setTimeout 示例2.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="status"></div>

    <input type="button" value="删除" onclick="DeleteEle();"/>

    <script>

        function DeleteEle(){

        document.getElementById('status').innerText="已删除";

        setTimeout(function(){

            document.getElementById('status').innerText="";

        },2000);

        }

    </script>

</body>

</html>

效果图：

11. 在timeout到来之前，可以清除掉。clearTimeout.

var a1=setInterval ( function( ){ },5000);

clearInterval(a1);

var a2=setTimeout( function( ){ },50000);

clearTimeout(a2);

Dom样式操作-属性操作的更多相关文章

jQuery 选择器筛选器样式操作文本操作属性操作文档处理事件动画效果插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
jQuery-介绍加载选择器样式操作属性操作绑定click事件
jQuery - 介绍加载选择器样式操作属性操作绑定click事件注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作样式 ⑤ 事件点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作样式 ⑤ 事件点击变色
jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...
jQuery - 02. 样式表属性操作/类操作、动画、显示隐藏、滑入、淡入、停止动画、节点操作、添加对象、清空节点
样式表属性操作.css $("div").css({'width':100,'height':100,'background':'red'}); $("div" ...
dom操作属性操作样式操作
jQuery DOM操作 1 插入子元素 append('<img>') 插后面被插入元素调用 appendTo('<img scr="...">') 新 ...
css样式之属性操作
一.文本属性 1.text-align:cnter 文本居中 2.line heigth 垂直居中 :行高,和高度对应 3.设置图片与文本的距离:vertical-align 4.text-decor ...
jQuery-对标签元素文本操作-属性操作-文档的操作
一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...
jQuery总结02_jq的dom操作+属性操作
一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点比如动态创建表格等,在js里面进行完成. *删除节点这里面的删除就是将其放在了一个地方,并 ...

随机推荐

北京Uber优步司机奖励政策（4月1日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
P2664 树上游戏
P2664 树上游戏 https://www.luogu.org/problemnew/show/P2664 分析: 点分治. 首先关于答案的统计转化成计算每个颜色的贡献. 1.计算从根出发的路径的答 ...
LeetCode：43. Multiply Strings （Medium）
1. 原题链接 https://leetcode.com/problems/multiply-strings/description/ 2. 题目要求给定两个String类型的正整数num1.num ...
journalctl 日志查看方法
1 概述日志管理工具journalctl是centos7上专有的日志管理工具,该工具是从message这个文件里读取信息.Systemd统一管理所有Unit的启动日志.带来的好处就是,可以只用jo ...
一个体验好的Windows 任务栏缩略图开发心得
本文来自网易云社区作者:孙有军前言: 对于一个追求极致体验的软件来说,利用好系统的每一点优秀的特性,将会大大提高软件的品质. Windows vista以来任务栏缩略图,及Win + TAB的程序 ...
说一说VIN码识别，车架号识别那些事
对于有车一族的朋友来说,日常接触比较多的是车牌.行驶证.驾驶证,而知道VIN码/车架号码的比较少. 其实,对于车辆来说,VIN码/车架号码非常重要,它就像人的身份证一样,VIN码/车架号码是车辆唯一的 ...
MySQL☞自连接
自连接:一张表中根据自身列之间的关联关系,自己跟自己链接. A.创建一个user表,且插入数据,数据如下: B.分析: 把user表看成两张表,一张员工表,一张领导表,发现员工表中lead(领导编号) ...
Unity Android设备的输入
Unity Android设备的输入 1依据屏幕位置输入有的时候也许是为了整个有些风格的干净,减少屏幕上的UI图标,以至于摒弃了虚拟按键这种常用的输入方式.为了替代虚拟按键的输入方式而选择了依据点击 ...
牛客网暑期ACM多校训练营（第五场）：F - take
链接:牛客网暑期ACM多校训练营(第五场):F - take 题意: Kanade有n个盒子,第i个盒子有p [i]概率有一个d [i]大小的钻石. 起初,Kanade有一颗0号钻石.她将从第1到第n ...
【QT】宏
宏 Q_CORE_EXPORT _CORE_EXPORT 其实是一个宏,用来说明这是一个动态库导出类.QT是个跨平台的库,而不同的操作系统,不同的编译器,对动态库的导出说明是不一样的,比如,在wind ...

Dom样式操作-属性操作

Dom样式操作-属性操作的更多相关文章

随机推荐

热门专题