本文目录一览:
- 1、JS修改CSS设置的样式
- 2、JS给HTML中添加CSS的问题
- 3、HTML JS动态设置CSS样式
- 4、html css js导航点击菜单后自动改变背景颜色
- 5、HTML中引入css和js的方法
- 6、html中怎么使用jQuery和css,js?
JS修改CSS设置的样式
语法:元素.style.样式名=样式值
注意:如果CSS的样式名中含有-,这种名称在JS中是不合法的,比如 background-color 。需要将这种样式名修改为驼峰命名法:去掉-,然后将-后的第一个字母大写,比如 backgroundColor
我们通过style属性设置的样式都是内联样式,而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示
但是如果在样式中写了!important,则此时样式会有最高的优先级,即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效
所以尽量不要为样式添加!important
语法:元素.style.样式名
通过style属性设置和读取的都是内联样式,无法读取样式表中的样式
语法:元素.currentStyle.样式名
如果当前元素没有设置该样式,则获取它的默认值
例如: box1.currentStyle.width
这个方法是window的方法,可以直接使用需要两个参数
第一个:要获取样式的元素
第二个:可以传递一个伪元素,一般都传null
该方法会返回一个对象,对象中封装了当前元素对应的样式
可以通过对象﹒样式名来读取样式
如果获取的 样式没有设置 ,则会获取到真实的值,而不是默认值
比如:没有设置width,它不会获取到auto,而是 一个长度
注意:通过currentStyle和getComputedstyle()读取到的样式都是只读的,不能修改,如果要修改必须通过style属性
参数:
obj 要获取样式的元素
name 要获取的样式名
JS给HTML中添加CSS的问题
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML
HEAD
TITLE New Document /TITLE
META NAME="Generator" CONTENT="EditPlus"
META NAME="Author" CONTENT=""
META NAME="Keywords" CONTENT=""
META NAME="Description" CONTENT=""
style type="text/css"
.b{
color:#f00;
}
.c{
color:#00f;
}
/style
SCRIPT LANGUAGE="JavaScript"
!--
function ShowA(){
var a = document.getElementById("test");
a.style.fontSize="70";
}
function ShowB(){
var a = document.getElementById("test");
//由于Class属于javascrip保留关键字,所以W3C采用了ClassName,以前我老记错,直接写class,知道为什么了来的,就记住了.
a.className="b";
}
function ShowC(){
var a = document.getElementById("test");
//在IE下用"className",而在FF下用"class".这点是要注意的。这样写法麻烦
a.setAttribute("className","c");
}
function ShowD(){
var a = document.getElementById("test");
a.innerHTML ="span style='color:#0f0;'哈哈测试下,就知道这些了/span"
}
//--
/SCRIPT
/HEAD
BODY
span id="test" 哈哈测试下,就知道这些了,有些有兼容的问题,反正都能到达修改样式的效果/span
br/
INPUT TYPE="button" NAME="" id="btnTest" onclick="ShowA()" value="利用style属性"
INPUT TYPE="button" NAME="" id="btnTest" onclick="ShowB()" value="利用className属性"
INPUT TYPE="button" NAME="" id="btnTest" onclick="ShowC()" value="利用SetAttrbute()方法"
INPUT TYPE="button" NAME="" id="btnTest" onclick="ShowD()" value="利用InnerHTML()方法"
/BODY
/HTML
如果觉得好 就多给一点分吧 (*^__^*) 嘻嘻……
HTML JS动态设置CSS样式
我估么着缺点就是吃饱了撑的,没事就别用js设置CSS,还有啊一般来说,修改少量CSS可以直接修改就是document.getElementById('id').style.color="#f00";大量修改是改变元素的class名称来实现的。
html css js导航点击菜单后自动改变背景颜色
1、建立一个静态页命名为change.html ,标题为js导航点击的怎么同时变图片跟字体颜色。
2、设置一个简易的导航栏。
3、加css 控制菜单的样式,并加入背景图片。
4、为li添加id,创建函数fun ,并传递传递参数。
5、为函数加入点击导航改变背景图片的代码element.style.backgroundImage="url(images/bg2.png)";
6、加入改变文字大小的代码
element.style.color="black";
//修改文字大小
element.style.fontSize="18px";
7、然后就完成了。
HTML中引入css和js的方法
我们在HTML中经常需要引入CSS和JS文件,那么如何引入呢?下面我给大家演示一下。
工具/材料
Sublime Text
01
首先新建一个文件夹,在文件夹下面建立如下图所示的文件
02
接下来用Sublime Text打开HTML文件,写入HTML结构,如下图所示
03
然后我们在Head标签内用link标签引入CSS文件,如下图所示
04
最后用Script标签引入JS文件即可,如下图所示
html中怎么使用jQuery和css,js?
(1)jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中,有59%使用了jQuery,是目前最受欢迎的JavaScript库。
(2)CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
(3)JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。它最初由网景公司(Netscape)的Brendan Eich设计,是一种动态、弱类型、基于原型的语言,内置支持类。
JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。