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

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

-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样式表属性的干预就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS 控制CSS样式表

    下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

  • JavaScript改变HTML元素的样式改变CSS及元素属性

    改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: 复制代码 代码如下: document.getElementById(id).style.property=new style <p id="p2">Hello World!</p> <script> document.getElementById("p2").style.color="blue"; </script> JS改变

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

    -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写 以下是一段js 作用于 css 的 href的 代码 <link id="l1" rel="stylesheet" type="text/css" href="css1.css" rel="external nofollow" /> <script> function skin1() { var oL=docum

  • 浅谈js控制li标签排序问题 js调用php函数的方法

    浅谈js控制li标签排序问题 js调用php函数的方法

    [Html代码] <span style="font-size:14px;"><ul class="list-group"> <? if ($categorys): ?> <? foreach ($categorys as $category):?> <li class="list-group-item" data-id="<? echo $category->id ?&

  • 浅谈JS读取DOM对象(标签)的自定义属性

    DOM对象对于js来说,是个很基础的元素,我们写js一般来说,都一定会对它进行操作.我们可以很方便地给它加上自定义的属性,比如: <div id="test" class="hello"></div> var test = document.getElementById("test"); test.adang = "adang"; alert(test.adang); 我们会发现,已经给这个id为tes

  • 浅谈JS中的常用选择器及属性、方法的调用

    选择器.属性及方法调用的配合使用: <style> #a{ width: 200px; height: 100px; background-color: red; } .b{ width: 200px; height: 100px; background-color: green; } .div1{ width: 200px; height: 100px; background-color:aqua; } </style> <body> <div id="

  • 浅谈jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组

    浅谈jsp的C标签一般使用方法以及js接收servlet中的对象及对象数组

    由于现流行的javaWeb框架提倡前后端分离,比如在SpringMvc中已经很少写servlet的一些东西:目前 前端jsp中大多是一些纯html和js,很少用到jstl的一堆东西,后端也仅仅处理一些前端的post.get请求或页面跳转,无须以往繁琐的xml路径映射和filter过滤. 不过有时也会用到servlet作用域中的一些东西,比如某个固定的值.上下文路径等等~,不过这些东西大多数也仅限于取值而不是设置值(或对象),所以sun给了一个非常简洁的取值方式:C标签! 下面将简述下C标签的一些

  • 浅谈js使用in和hasOwnProperty获取对象属性的区别

    in判断的是对象的所有属性,包括对象实例及其原型的属性: 而hasOwnProperty则是判断对象实例的是否具有某个属性. 示例代码: <script type="text/javascript"> function Person(){ } Person.prototype.name = "allen"; var person = new Person(); console.log(person.hasOwnProperty("name&qu

  • 浅谈JS使用[ ]来访问对象属性

    对象的属性由两种固定的方法来访问:"."记法和"[ ]"方括号记法: 使用"."号记法访问标准的对象属性,使用"[ ]"方括号记法访问由页面定义的对象属性.如下 document.forms["myformname"].elements["myinput"].value 这里,forms 是 document 的一个标准属性,而表单名 myformname 则是由页面所定义的.同时,el

  • 浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处

    [JS对象属性的查询和设置] 可以通过点(.) 或 方括号([]) 运算符来获取属性的值.运算符左侧应当是一个表达式,它返回一个对象.对于点(.)来说,右侧必须是一个以属性名称命名的简单标识符.对于方括号([])来说,方括号里必须是一个计算结果为字符串的表达式,这个字符串就是属性的名字: <script type="text/javascript"> var author = book.author; //得到book的"author"属性 var na

  • 浅谈js内置对象Math的属性和方法(推荐)

    属性: constructor 所建立对象的函数参考 prototype 能够为对象加入的属性和方法 E 欧拉常量,自然对数的底(约等于2.718) LN2 2的自然对数(约等于0.693) LN10 10的自然对数(约等于2.302) LOG2E 以2为底的e的对数.(约等于1.442) LOG10E 以10为底的e的对数(约等于0.434) PI ∏的值(约等于3.14159) SQRT1_2 1/2(0.5)的平方根(即l除以2的平方根,约等于o.707) SQRT2 2的平方根(约等于1

  • 浅谈js文件引用方式及其同步执行与异步执行

    任何以appendChild(scriptNode) 的方式引入的js文件都是异步执行的 (scriptNode 需要插入document中,只创建节点和设置 src 是不会加载 js 文件的,这跟 img 的与加载不同 ) html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的 html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的 html文件中的<script>标签src

随机推荐