JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型
基本使用
- 写在Script 标签里
- 引入外部js文件:<script src=" "></script>
- console.log(" ") 方法用于在控制台输出信息
注意事项
- 严格区大小写
- 每一行完整语句后面加分号
- 变量名不能使用关键字和保留字
- 代码要缩进,保持可读性
修改元素内容
- 获取元素
- 通过id获取元素:document.getElementById(“”);
- 通过class名字获取元素:document.getElementsByClassName(“”);
- 通过标签名获取元素:document.getElementsByTagName(“”);
- 通过 name的属性获取元素,一般用于input:document.getElementsByName(“”);
- 通过CSS选择器获取一个:document.querySelector (“”);
- 通过CSS选择器获取所有:document.querySelectorAll(“”);
- 修改元素内容
- var 是 js 定义变量的关键字:var content = document.get....
- innerHTML 和 innerText 可以修改/获取(HTML内容和文本内容):content.innerHTML="<h1>标题</h1>"
简单事件
- 单击事件:onclick
- 双击事件:ondblclick
- 鼠标划入:onmouseenter
- 鼠标划出:onmouseleave
- 窗口变化时:onresize
- 改变下拉框时:onchange
修改样式(通过js修改css)
- 获取元素:var box = document.getElementById("div1");
- 方法一:box.style.border="1px red solid";
- 方法二:box.style["border"]="1px red solid";
操作标签属性
- 自带属性
- box.className="d1";
- 自定义属性
- 设置属性: box.setAttribute('aaa','bbb');
- 删除属性:box.removeAttribute("class");
- 判断是否存在属性:box.hasAttribute("aaa")
数据类型
- 字符串:string
- 数字:number
- 非数字:NAN
- 布尔:boolean
- 未定义:undefined
- 空:null
- 对象:object
- 查看数据类型:typeof 变量名
JS 获取元素、修改元素/css样式/标签属性、简单事件、数据类型的更多相关文章
- JavaScript 获取HTML中的CSS样式的属性以及值的的方法。
<body> <div id="wow" style="font-size:10px; float:left"></div> ...
- JS获取HTML DOM元素的方法
JS获取HTML DOM元素有八种方法: 1.根据id获取标签元素: document.getElementById("id名"); 2.根据标签名获取标签列表: document ...
- php有效的过滤html标签,js代码,css样式标签
过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...
- js 获取iframe页面元素
js 获取iframe页面元素 CreationTime--2018年8月16日18点00分 Author:Marydon <!-- chart图表 --> <iframe id ...
- JavaScript 获取和修改 内联样式
JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...
- CSS样式常用属性整理
web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点--<CSS样式常 ...
- getComputedStyle与currentStyle获取元素当前的css样式
CSS的样式分为三类: 内嵌样式:是写在标签里面的,内嵌样式只对所在的标签有效内部样式:是写在HTML里面的,内部样式只对所在的网页有效外部样式表:如果很多网页需要用到同样的样式,将样式写在一个以.c ...
- 获取jQuery对象的第N个DOM元素 && table常用css样式
获取jQuery对象的第N个DOM元素 1.$(selector).get(N-1) 2.$(selector)[N-1] 注意:.index()方法返回的是一个数,相当于C#中的IndexOf() ...
- js 获取任意一个元素的任意一个样式属性的值
//谷歌,火狐支持console.log(window.getComputedStyle(my$("dv"),null).left);//IE8支持console.log(my$( ...
随机推荐
- 【Android - IPC】之ContentProvider简介
1.Content Provider简介 Content Provider是Android中提供的一种专门用于不同应用之间进行数据共享的方式,从这一点来看,它天生就适合IPC(Inter-Proces ...
- 为NLog自定义LayoutRenderer
长话短说 前文<解剖HttpClientFactory,自由扩展HttpMessageHandler>主要想讲如何扩展HttpMessageHandler, 示例为在每个Http请求中的 ...
- Linux命令行初学(一)
linux命令大全:https://www.linuxcool.com/ 大概了解到有哪些命令,如果有需要的话可以在该网站上查询. 另外在实验楼学习了一些基础,该篇博客就此次对linux命令行的学习进 ...
- vue中,使用element ui的弹窗与echarts之间的问题
今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就 ...
- 硬核! 逛了4年Github ,一口气把我收藏的 Java 开源项目分享给你!
Awsome Java Great Java project on Github(Github 上非常棒的 Java 开源项目). English Version 大家都知道 Github 是一个程序 ...
- 【Python成长之路】装逼的一行代码:快速共享文件【华为云分享】
[写在前面] 有时候会与同事共享文件,正常人的操作是鼠标右键,点击共享.其实有个装逼的方法,用python的一行代码快速实现基于http服务的共享方式. [效果如下] [示例代码] 在cmd窗口进入想 ...
- 深入理解Android异步消息处理机制
一.概述 Android 中的异步消息处理主要分为四个部分组成,Message.Hndler.MessageQueue 和 Looper.其关系如下图所示: 1. Message 是线程之间传递的消息 ...
- springboot执行延时任务-DelayQueue的使用
DelayQueue简介 在很多场景我们需要用到延时任务,比如给客户异步转账操作超时后发通知告知用户,还有客户下单后多长时间内没支付则取消订单等等,这些都可以使用延时任务来实现. jdk中DelayQ ...
- luogu P1972 [SDOI2009]HH的项链 |树状数组 或 莫队
题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断地收集新的贝壳,因此,他的项链变得越来越长. ...
- mac查看开关机记录-last命令
命令 last | grep reboot (查看开机时间记录) last | grep shutdown (查看关机时间记录) /var/log/messages日志中查询reboot(系统重启) ...