浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预


Posted in Javascript onJune 25, 2017

-任何标签的任何属性都可以修改!

-HTML里是怎么写, JS就怎么写

以下是一段js 作用于 css 的 href的 代码

<link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" />
<script>
function skin1()
{
  var oL=document.getElementById('l1');
  
  oL.href='css1.css';
}
 
function skin2()
{
  var oL=document.getElementById('l1');
  
  oL.href='css2.css';
}
</script>
 
 
<input type="button" value="皮肤1" onclick="skin1()" />
<input type="button" value="皮肤2" onclick="skin2()" />

原理:

1.更改皮肤样式是通过<link> 链接 css文件达成的

2.href = 'XXX' 是决定皮肤引用的链接文件是这个还是那个.

3. 更改 href 这个动态的变化是通过:

1. 事件触发 'skin1' 'skin2'

2. skin1 或2 更改当前href = 的值

我们在变更css的时候不是变更css样式数据本身, 而是变更引用数据.

在今后的编程里面思维, 变更意味着1. 变更源码, 2. 变更引用.

css+JS代码步骤:

1.确认变更 类型, 是' 引用'还是' 源码'. 如果是一般采取外部引用的css, 多数以变更引用

2. 安插id 或者class 到更改区域

3.直接用script函数干预id 的 '引用'或是'源码' css 一般用href去引用

4. 想象并决定用哪个事件 (参考下表)

5.赋值触发script 函数.事件属性(某个html下的标签),

属性 当以下情况发生时,出现此事件 FF N IE
onabort 图像加载被中断 1 3 4
onblur 元素失去焦点 1 2 3
onchange 用户改变域的内容 1 2 3
onclick 鼠标点击某个对象 1 2 3
ondblclick 鼠标双击某个对象 1 4 4
onerror 当加载文档或图像时发生某个错误 1 3 4
onfocus 元素获得焦点 1 2 3
onkeydown 某个键盘的键被按下 1 4 3
onkeypress 某个键盘的键被按下或按住 1 4 3
onkeyup 某个键盘的键被松开 1 4 3
onload 某个页面或图像被完成加载 1 2 3
onmousedown 某个鼠标按键被按下 1 4 4
onmousemove 鼠标被移动 1 6 3
onmouseout 鼠标从某元素移开 1 4 4
onmouseover 鼠标被移到某元素之上 1 2 3
onmouseup 某个鼠标按键被松开 1 4 4
onreset 重置按钮被点击 1 3 4
onresize 窗口或框架被调整尺寸 1 4 4
onselect 文本被选定 1 2 3
onsubmit 提交按钮被点击 1 2 3
onunload 用户退出页面 1 2 3

以下是一段JS作用于标签的事件属性的代码

一个例子:

这是更改源码的类型

找到源码区域 input, 帮input区域加一个id

想象一个叫onclick的事件, 当鼠标移上去id源码就要改变

建立script 函数, 更变更'.title'并赋值

赋值触发script 函数.事件属性(input type=button)

<script>
function setText()
{
  var oTxt=document.getElementById('txt1');
  
  oTxt.title='abcddfdasfe';
}
</script>
 
<input id="txt1" type="text" />
<input type="button" value="改文字" onclick="setText()" />

以上这篇浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
vue如何判断dom的class
Apr 26 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 #Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 #Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 #Javascript
jQuery实现拖动效果的实例代码
Jun 25 #jQuery
JS检测window.open打开的窗口是否关闭
Jun 25 #Javascript
jQuery validata插件实现方法
Jun 25 #jQuery
简单谈谈axios中的get,post方法
Jun 25 #Javascript
You might like
Array of country list in PHP with Zend Framework
2011/10/17 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
BootStrap中
2016/12/10 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python实现的简单hangman游戏实例
2015/06/28 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
浅谈用Python实现一个大数据搜索引擎
2017/11/28 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
春节请假条
2014/04/11 职场文书
大学生年度个人总结
2015/02/15 职场文书
革命电影观后感
2015/06/18 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android