web学习记录-JS-12
使用DOM修改CSS样式
通过JS修改CSS样式
元素.style.样式名 = 样式值; 注意:如果CSS的样式名中含有-号,不合法。如background-color,需去掉-号,样式名修改为驼峰命名法;
通过style属性设置的都是内联样式,内联样式有较高的优先级,通过JS修改会立刻显示;
如果样式中写有!impotent,此时样式为最高优先级,JS修改会失效;,尽量不用;
读取样式
元素.style.样式名;
通过style属性读取的都是内联样式;无法读取样式表中的样式;
获取元素当前显示的样式
元素.currentStyle.样式名; 只有IE浏览器支持;
在其他浏览器中,使用getComputedStyle()来获取元素的当前样式;是window的方法,可以直接使用;
需要两个参数,第一个:要获取样式的元素;第二个,可以传递一个伪元素,一般都传null;
该方法会获取一个对象,对象封装了当前元素对应的样式;
可以通过对象.样式名来读取样式,如果获取的样式没有设置,则会获取真实的值,而不是默认值;
该方法不支持IE8及以下的浏览器;
通过这俩方法读取到的样式都是只读的,不能修改;
定义一个函数,用来获取指定元素的当前的样式
参数:obj:要获取样式的元素; name:要获取的样式名;
function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];}
else{
return obj.currentStyle[name];}
}
window.getComputedStyle?return getComputedStyle(obj,null)[name]:return obj.currentStyle[name];
需要加window前缀
其他样式的操作属性
clientWidth clientHeight 这两个属性可以获取元素的可见宽度和高度;
这些属性都是不带PX的,返回的一个数字,可以直接计算;
会获取元素的宽,高,包括内容区和内边距;
这些属性都是只读,不能修改;
offsetWidht offsetHeight 获取元素的整个的宽度和高度,包括内容区,内边距和边框;
offsetParent 获取当前元素的定位父元素;
会获取到离当前元素最近的开启了定位的祖先元素;
如果所有祖先元素都没定位,则返回body;
offsetLeft offsetTop 当前元素相对于其定位父元素的水平,垂直偏移量;
scrollHeight scrollWidth 可以获取元素整个滚动区域的高度,宽度;
scrollLeft 可以获取水平滚动条滚动的距离;
scrollTop 可以获取垂直滚动条滚动的距离;
当满足scrollHeight - scrollTop == clientHeight是,说明垂直滚动条滚动到底了;
当满足scrollWidth - scrollLeft == clientHeight是,说明水平滚动条滚动到底了;
如果为表单项添加一个属性disabled=“disabled”,则表单项将变成不可用;
onscroll,该事件会在元素的滚动条滚动时触发;
事件对象 当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数;事件对象中封装了相关事件的一切信息;
onmousemove 会在鼠标在元素中移动时触发;
clientX clientY 获取鼠标指针的水平,垂直坐标;
在IE8及以下浏览器中,响应函数被触发时,浏览器不会传递事件对象,是将事件对象作为window对象的属性保存的;
兼容性 enent = enent || window.enent;
pageX和pageY 可以获取鼠标当前页面的坐标 IE8中不支持;
chrome认为浏览器的滚动条是body的,可以通过document.body.scrollTop获取;
火狐等浏览器认为浏览器滚动条是HTML的,可以通过doucment.documentElement.scrollTop获取;
冒泡
事件的冒泡(Bubble)事件的向上传递,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发;
开发中,冒泡事件大部分是有用的;可以用事件对象取消冒泡;
可以将事件对象的cancelBubble设置为true可取消冒泡;
转载于:https://www.cnblogs.com/xihuanjiuquqiqang/p/10274683.html
web学习记录-JS-12相关推荐
- 第一周前端web学习记录
第一周前端web学习记录 #什么是HTML.CSS? 如何写代码以及在哪里写 vs code 的基本使用方法 浏览器 网站开发 HTML 的结构基础和属性 创建标签 嵌套 HTML标签 设置属性 HT ...
- openshift/origin学习记录(12)——离线安装集群
最近在公司申请了三台云主机,并在这三台云主机上搭建openshift集群.由于公司的云主机是内网环境,无法连接外网,所以需要离线安装.记录过程如下: 搭建本地yum服务器 在之前在线安装的opensh ...
- ctfshow web学习记录
我们要学习且不断努力,在ctfshow我又学习到了很多东西,弥补了自己不少基础 目录 七夕杯-web 1.web签到 第一种解法: 编辑 第二种解法: 2.easy_calc 3.easy_cmd ...
- CTF之web学习记录 -- 命令注入
命令注入 概述 常见攻击方式 使用管道符号 escapeshellarg和escapeshellcmd 无参RCE 模板注入 命令执行漏洞修复 总结 概述 web服务器后端代码有时会调用一些执行系 ...
- CTF之web学习记录 -- 文件包含
文件包含 概述 常见文件包含函数和原理 本地文件包含 远程文件包含 远程包含加问号截断 利用php://filter 利用php://input 序列化和反序列化 Java文件包含 CVE-2018- ...
- java web学习记录(ubuntu18.04 java8 tomcat8)
dom的应用 tomcat的安装,实测可用 启动的话,就不开机自了,/opt/tomcat8/bin/startup.sh这句用来启动 用idea创建一个java web,实测可用 page指令常用有 ...
- 前端学习记录 JS DOM
HTML DOM 文档对象模型 被结构化为对象树 HTML DOM 方法是能在 HTML 元素上执行的动作 HTML DOM 属性是能够设置或改变 HTML 元素的值 查找 HTML 元素 docum ...
- Java Web学习总结(12)——使用Session防止表单重复提交
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...
- 【目录】全志V3S学习记录
全志V3s从一次接触到现在已经有两年了!现在复盘一下! 使用的硬件开发板有: Lichee zero Lichee zero dock CherryPi PC V3s Mangopi v3s SINV ...
- MMD新人学习记录博客1
##MMD学习记录 2019/12/18 第一次进行博客记录,不仅动画学习在探索阶段,博客的书写也同样处在摸索阶段.所以也希望能在动画学习过程中慢慢提升博客的制作水平. 当前学习MMD是通过在b站观看 ...
最新文章
- ubuntu18.04.4 录制麦克风音频
- 今天意外和身份证结缘
- kylin如何支持flink_如何使用 JuiceFS 在云上优化 Kylin 4.0 的存储性能?
- C语言 memcpy和memcpy_s区别 - C语言零基础入门教程
- Web前端笔记-解决Vue编写的输入框(input、textarea等)使用JS设置value时提交表单无效的问题
- JAVA 计算地球上任意两点(经纬度)距离
- 数组的操作与方法的操作 0303 2101
- Homebrew命令详解
- [LeetCode] NO. 8 String to Integer (atoi)
- vim java自动补全_java – eclim没有在vim中做自动完成
- node --进行后台的环境搭建
- 图解分析:基于setnx的分布式锁有什么缺陷
- 达梦数据库 函数操作
- html post与get的区别,post 和get请求的区别(html)
- 看门狗计算机丢失xinput13.dll,windows10系统打开程序提示丢失xinput13dll怎么办
- ivx中字体显示_【初阶篇】iVX成语填字游戏制作
- LoRa 信噪比和接收灵敏度
- MariaDB 10.6.10离线安装
- 微信小程序导购开发跳转到京东拼多多苏宁唯品会等小程序
- linux常用重启命令,linux常用关机和重启命令
热门文章
- Arduino NBIoT使用方法一
- 1553B 协议详解
- 计算机主板z h b,主板的A系 B系 H系 Z系有什么区别?
- 信息系统安全实验(一):InterNIC、Nslookup、Sam spade、Nmap、Nessus的使用
- Linux内核4.1在file_operations的read_iter和write_iter
- Entry name ‘META-INF/MANIFEST.MF‘ collided
- 【DX12】DirectX Math库 Vector和Matrix类型 XMVECTOR、XMMATRIX
- pe服务器制作教程,WINPE系统制作原理教程介绍
- 登录企业邮箱imap服务器,企业邮箱IMAP客户端的同步设置
- Java回收对象的标记 和 对象的二次标记过程