浅谈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 相关文章推荐
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
Feb 27 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 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
php利用cookie实现访问次数统计代码
2011/05/19 PHP
PHP小教程之实现链表
2014/06/09 PHP
php实现微信发红包
2015/12/05 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
[JSF]使用DataModel处理表行事件的实例代码
2013/08/05 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
js实现禁止中文输入的方法
2015/01/14 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python实现ip代理池功能示例
2019/07/05 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
十岁生日同学答谢词
2014/01/19 职场文书
法学专业自我鉴定
2014/02/05 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
python字典的元素访问实例详解
2021/07/21 Python