JS 修改CSS

作者:豫章太守王獒 点击:1245 留言:0

1.js修改单个元素的css属性

  document.getElementByIdx('obj').className=”…”,

  document.getElementByIdx('obj').style.backgroundColor=”#003366″ ,

  2.js修改整个页面的css属性

  <link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />

  <span on click="javascript:document.getElementByIdx('css').href = 'ie.css'"> </span>

  3.js和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

  4.引起css改变的js事件

  HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

  FF: Firefox, N: Netscape, IE: Internet Explorer

属性 当以下情况发生时,出现此事件 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

  军三国网络游戏公会成立于2011年4月26日。公会由两大部分组成,北军和南军。北军为一些技术爱好者,公会名称就是取自本公会负责开发的军三国单机版游戏。
  军三国这款游戏让我们这些志同道合的技术爱好者们走在了一起。我们相信军三国网络游戏公会会一直走下去的。
  军三国公会的前身为处州IT精英工作室,也一直秉承之前的口号,我们从草根走向精英。也许,现在的我们不是很强大,但是我们的理想会让我们成为自己所属行业的精英。