浅谈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 相关文章推荐
jquery validate使用攻略 第四步
Jul 01 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
Angular7中创建组件/自定义指令/管道的方法实例详解
Apr 02 Javascript
vue 更改连接后台的api示例
Nov 11 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue实现登录功能
Dec 31 Vue.js
浅谈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
如何去掉文章里的 html 语法
2006/10/09 PHP
Windows下的PHP5.0详解
2006/11/18 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
JS定时器实例
2013/04/17 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
零基础写python爬虫之神器正则表达式
2014/11/06 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python实现多属性排序的方法
2018/12/05 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
小学生寒假家长评语
2014/04/16 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python