火力光波的博客

火一般的热情光一样的速度

日志

关于我

火力光波

文章分类

JS编码与CSS属性对照表

2010-03-11 23:52:08| 分类： CSS代码 | 标签： |举报 |字号大中小订阅

下载LOFTER 我的照片书 |

JS编码与CSS属性对照表

CSS与JS紧密配合，为我们的页面增添了很多别致的效果。

为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性。

比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：

JavaScript中style后面的属性应该是什么？

e.style.borderWidth=0;
}
</script>

盒子标签和属性对照
    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
来源：学网 >

评论这张

转发至微博

阅读(1521)| 评论(10)

历史上的今天

this.p={  m:2,
              b:2,
              loftPermalink:'',
              id:'fks_080066080085084069082085083095092086086071081094095066',
              blogTitle:'JS编码与CSS属性对照表',
              blogAbstract:' \r\n<P align=\"center\"  \><FONT color=\"#ff00ff\"  size=\"4\"  face=\"楷体_GB2312\"  \>JS编码与CSS属性对照表</FONT\></P\>\r\n<P align=\"center\"  \><FONT size=\"2\"  \>CSS与JS紧密配合，为我们的页面增添了很多别致的效果。</FONT\></P\>\r\n<P align=\"center\"  \><FONT size=\"2\"  \>为了达到某种特殊的效果我们需要用Javas<WBR\>cript动态的去更改某一个标签的CSS属性。</FONT\></P\>\r\n<P align=\"center\"  \><FONT size=\"2\"  \>    比如：鼠标经过一个图片时我们让图片加一个边框，代码可能是这样：</FONT\></P\>\r\n<P align=\"center\"  \><FONT size=\"2\"  \>JavaS<WBR\>cript中style后面的属性应该是什么？</FONT\></P\>\r\n<P align=\"center\"  \> </P\>\r\n<CENTER\>\r\n<DIV style=\"BORDER-BOTTOM: 1px outset; BORDER-LEFT: 1px outset; OVERFLOW-X: hidden; OVERFLOW-Y: auto; WIDTH: 450px; HEIGHT: 120px; BORDER-TOP: 1px outset; BORDER-RIGHT: 1px outset;\"   \>\r\n<P\></P\></DIV\></CENTER\>',
              blogTag:'',
              blogUrl:'blog/static/80745891201021111528549',
              isPublished:1,
              istop:false,
              type:2,
              modifyTime:1510471911432,
              publishTime:1268322728549,
              permalink:'blog/static/80745891201021111528549',
              commentCount:10,
              mainCommentCount:10,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              currentRecomBlog:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'',
              visitorCity:'',
              visitorNewUser:false,
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              selfRecomBlogCount:'0',
              lofter_single:'<iframe width="140" height="560" style="overflow:hidden;" src="http://www.lofter.com/mailEntry.do?blogad=1&blog" frameBorder="0"></iframe>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/80745891201021111528549">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇，下一篇--> <#-- 热度 -->

{list a as x}
    {if !!x}
    <div class="hotItem iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
      {if x.publisherUsername==visitor.userName}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.publisherNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.publisherUsername)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/">
          ${fn(x.publisherNickname,8)|escape}
        </a>
      </div>
      <a class="f-myLikeIcons hottype {if x.type==1} js-liketype{elseif x.type==2} js-reblogtype{elseif x.type==3} js-sharetype{else}{/if}" target="_blank" hidefocus="true" href="http://blog.163.com/${x.publisherUsername}/"> </a>
    </div>
    {/if}
    {/list}

<#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

火力光波的博客

导航

日志

JS编码与CSS属性对照表

历史上的今天

最近读者

热度

评论

页脚