文档章节

用JS控制CSS基本样式的方法?

陆地上的飞鱼
 陆地上的飞鱼
发布于 2013/12/24 00:10
字数 888
阅读 71
收藏 0

用JS控制CSS基本样式的方法?

<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">

?<HTML>

?<HEAD>?

<link?rel="stylesheet"?type="text/css"?href="abc.css"?/>?

<TITLE>?New?Document?</TITLE>?

<script>?

window.onload=fnInit;?

function?fnInit(){?

//?访问?styleSheet?中的一条规则,?将其?backgroundColor?改为蓝色。?

var?oStyleSheet=document.styleSheets[0];?

var?oRule=oStyleSheet.rules[0];?

oRule.style.backgroundColor="#0000FF";?}

?</script>

?</HEAD>

<BODY>?

<div?class="class1">aaa</div>

?</BODY>?</HTML>?(2)?


<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.0?Transitional//EN">?

<HTML>

?<HEAD>?


<TITLE>?New?Document?</TITLE>?

<style?type="text/css">

<!--?

#apDiv1?{?

position:absolute;?width:399px;?height:195px;?z-index:1;?

border:1px?solid?#000;?background-color:#CCCCCC;?}?-->?


</style>

<script>

window.onload?=?function(){

alert(document.getElementById('apDiv1').currentStyle.width)?}

?</script>?</HEAD>?

<BODY>?

<div?id="apDiv1">aaa</div>?

?

</BODY>?

</HTML>?

还可以用???document.styleSheets(i).href??

可以知道当前页面中引用的每个css的文件!


另:CSS属性与JavaScript编码对照表?

(一定要注意,?上次本人_何向阳,在使用js修改css的中margin-left属性时,总报"left"未定义,后来,找了好多资料,才发现在js中,margin-left的写法为:marginLeft,恍然大悟,希望遇到相同问题的朋友,谨慎对待。)?CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。?????比如:鼠标经过一个图片时我们让图片加一个边框,代码可能是这样:JavaScript中style后面的属性应该是什么??<script?type="text/javascript">?????


function?imageOver(e)?{?????

e.style.border="1px?solid?red";?????}?????

function?imageOut(e)?{?????e.style.borderWidth=0;?????}?????

</script>?

?

<img?src="css.png"?onmouseover="imageOver(this)"?onmouseout="imageOut(this)"?/>?????JavaScript?CSS?Style属性对照表?

????盒子标签和属性对照?

CSS语法?(不区分大小写)???JavaScript语法?(区分大小写)??border???border??

border-bottom???borderBottom??

border-bottom-color???borderBottomColor??border-bottom-style???borderBottomStyle??border-bottom-width???borderBottomWidth??border-color???borderColor??border-left???borderLeft??

border-left-color???borderLeftColor??border-left-style???borderLeftStyle??border-left-width???borderLeftWidth??border-right???borderRight??

border-right-color???borderRightColor??border-right-style???borderRightStyle??border-right-width???borderRightWidth??border-style???borderStyle??border-top???borderTop??

border-top-color???borderTopColor??border-top-style???borderTopStyle??border-top-width???borderTopWidth??border-width???borderWidth??clear???clear??

float???floatStyle??margin???margin??

margin-bottom???marginBottom??margin-left???marginLeft??margin-right???marginRight??margin-top???marginTop??padding???padding??

padding-bottom???paddingBottom??


padding-left???paddingLeft??padding-right???paddingRight??padding-top???paddingTop?

颜色和背景标签和属性对照?

CSS语法?(不区分大小写)???JavaScript语法?(区分大小写)??background???background??

background-attachment???backgroundAttachment??background-color???backgroundColor??background-image???backgroundImage??

background-position???backgroundPosition??background-repeat???backgroundRepeat??color???color??样式标签和属性对照?

CSS语法?(不区分大小写)???JavaScript语法?(区分大小写)??display???display??

list-style-type???listStyleType??list-style-image???listStyleImage??

list-style-position???listStylePosition??list-style???listStyle??white-space???whiteSpace??文字样式标签和属性对照?

CSS语法?(不区分大小写)???JavaScript语法?(区分大小写)??font???font??

font-family???fontFamily??font-size???fontSize??font-style???fontStyle??font-variant???fontVariant??font-weight???fontWeight??文本标签和属性对照?

CSS语法?(不区分大小写)???JavaScript语法?(区分大小写)??letter-spacing???letterSpacing??line-break???lineBreak??line-height???lineHeight??text-align???textAlign??

text-decoration???textDecoration??text-indent???textIndent??text-justify???textJustify??

text-transform???textTransform??vertical-align???verticalAlign?


obj.style方法,这个方法只能JS只能获取写在html标签中的写在style属性中的值(style="..."),看一下代码?

XML/HTML代码?

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">????<html?xmlns="http://www.w3.org/1999/xhtml">????<head>????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>????<title>JS获取CSS属性值</title>????<style?type="text/css">????<!--??

.ss{color:#cdcdcd;}??-->????

</style>????</head>???

<body>????

<div?id="css88"?class="ss"?style="width:200px;?height:200px;?background:#333333">JS获取CSS属性值</div>????<script?type="text/javascript">????

alert(document.getElementById("css88").style.width);//200px?????alert(document.getElementById("css88").style.color);//空白?????</script>????????</body>????</html>??

上面这个例子对id为"css88"的div设置了2种烦事的样式,包括style和外部样式class。?

从alert出来的信息可以看到,document.getElementById("css88").style方法获取不到class为ss的属性和值。?

那么这么样才能获取到class为ss的属性和值呢??

IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle?方法。?网上一个比较方法是:?

?

XML/HTML代码?

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">????


© 著作权归作者所有

陆地上的飞鱼
粉丝 20
博文 16
码字总数 5403
作品 0
成都
高级程序员
私信 提问
DHTML(动态HTML)前台页面技术介绍

一、 DHTML(动态HTML)前台页面技术介绍 1、 DHTML介绍 DHTML包含以四个方面的内容: (1)、HTML 4.0 :超文本标记语言,网页文档的主体,以文本文件形式存储,由浏览器翻译后展现出丰富多...

至简6
2014/08/11
0
0
使用Boostrap,左侧菜单栏固定宽度,右侧自适应宽度。

1、方法one 思路概要: 创建CSS自定义工具类,如ml-220p:margin-left:220px; 使用JS绑定元素,控制相应元素增加和删除自定义的CSS工具类,达到预期视觉效果。 不足之处是不够极客,完全可以...

Asktao
2016/04/05
0
0
JavaScript获取DOM节点HTML元素CSS样式

JavaScript获取DOM节点HTML元素CSS样式技术 maybe yes 发表于2015-01-10 18:07 原文链接 : http://blog.lmlphp.com/archives/59 来自 : LMLPHP后院 如何使用 JavaScript 获取某个 DOM 节点下...

hosser
2015/03/21
0
0
Firefox和IE之间7个JavaScript的差异

尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了,但是偶尔使用一些简单的代码块和对象检测来确保一些代码在用户机器上正常工作依然是必要的。 这篇文章...

asurann
2010/01/26
98
0
web前端性能评测和常规优化方案

如何评测前端性能和优化? 前端开发页面要遵循的基本标准: 1. 统一使用框架、样式表base 2. html、CSS、JS编码要符合前端基本规范 3. CSS、JS进行压缩,多个CSS、JS时,需要进行CDN合并 4....

psasjs
2018/07/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一文让你轻松了解JAVA开发中的四种加密方法

文章目录 一、工具类 md5加密工具类 base64加密工具类 Bcrypt工具类 二、加密测试 MD5加密测试 base64加密测试 SHA加密测试 BCrypt加密测试 一、工具类 1. md5加密工具类 package 加密Teste...

爱编程的浪子
20分钟前
4
0
注解Annotation实现原理与自定义注解例子

什么是注解? 对于很多初次接触的开发者来说应该都有这个疑问?Annontation是Java5开始引入的新特征,中文名称叫注解。它提供了一种安全的类似注释的机制,用来将任何的信息或元数据(metad...

Java面经
21分钟前
5
0
并发模式与 RPS 模式之争,性能压测领域的星球大战

本文是《如何做好性能压测》系列专题分享的第四期,该专题将从性能压测的设计、实现、执行、监控、问题定位和分析、应用场景等多个纬度对性能压测的全过程进行拆解,以帮助大家构建完整的性能...

阿里云云栖社区
30分钟前
1
0
Knative Service 之流量灰度和版本管理

本篇主要介绍 Knative Serving 的流量灰度,通过一个 rest-api 的例子演示如何创建不同的 Revision、如何在不同的 Revision 之间按照流量比例灰度。 部署 rest-api v1 代码 测试之前我们需要...

阿里云官方博客
32分钟前
4
0
金融壹账通与菲律宾联合银行合作 共推科技平台赋能中小企业融资

中小微企业融资是世界性的难题,在破解这一难题上,中国平安集团一直在用科技手段贡献来自中国的解决方案,而区块链技术的引入更为这一问题的解决带来了新的方向,同时平安对外赋能的脚步也借...

IFTNews
33分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部