zoukankan      html  css  js  c++  java
  • DOM 操纵样式表

            CSS对应的JavaScript样式属性:background—color/style.backgroundColor,color/style.color,font/style.font,font-family/style.fontFamily,font-weight/style.fontWeight.

    一、局部改变样式 
    分为改变直接样式,改变className和改变cssText三种。需要注意的是: 
    注意大小写: 
    javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。 
    调用方法: 
    如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.className=”…”的写法是错误的!只能写成:document.getElementById('obj').className=”…” 
    改变cssText 
    但是如果用cssText的话,必须加上style,正确的写法是:document.getElementById('obj').style.cssText=”…” 

    改变直接样式我就不必说了,大家记得要写到具体样式即可,如 
    document.getElementById('obj').style.backgroundColor=”#003366″ 

    二、全局改变样式 
    通常情况下,我们可以通过改变外链样式的的href的值实现网页样式的实时切换,也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id,如  

    <link rel = "stylesheet" type="text/css" id="css" href="firefox.css" /> 
    调用时很简单,如  

    <span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span> 
    对于新人往往不知道CSS具体样式在javascript怎么写,而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat,在FIREFOX中写成cssFloat,这就需要大家的积累了。在google中搜索“ccvita javascript”,也许会对你的疑惑有所帮助。 


    基础知识 
    通常在网页中样式表的调用方法有三种。 
    第一种:链入外部样式表文件 (Linking to a Style Sheet) 
    你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下: 

    <head> 
    <title>文档标题</title> 
    <link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css"> 
    </link></head> 
    而在XML中,你应该如下例所示在声明区中加入: 

    < ? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?> 
    第二种:定义内部样式块对象 (Embedding a Style Block) 
    你可以在你的HTML文档的和标记之间插入一个 


    块对象。 定义方式请参阅样式表语法。示例如下:  

    <html> 
    <head> 
    <title>文档标题</title> 
    <style type="text/css"> 
    <!-- 
    body {font: 10pt "Arial"} 
    h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} 
    h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} 
    p {font: 10pt/12pt "Arial"; color: black} 
    --> 
    </style> 
    </head> 
    <body>  
    </body></html> 
    请注意,这里将style对象的type属性设置为”text/css”,是允许不支持这类型的浏览器忽略样式表单。 

    第三种:内联定义 (Inline Styles) 
    内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下: 

    <p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p><p> </p>

  • 相关阅读:
    (五)CSS和JavaScript基础
    (四)标签框架
    (三)表单与servlet的初步结合
    (三)文档结构(上)
    (二十一)持有对象以及泛型基础(1)
    (二十)内部类详解(转)
    (十九)接口类型的简介
    nginx配置文件
    nginx负载均衡
    debian iptables持久化
  • 原文地址:https://www.cnblogs.com/223y/p/5299099.html
Copyright © 2011-2022 走看看