2. 程式人生 > >JavaScript-簡單的CSS樣式

JavaScript-簡單的CSS樣式

阿新 • • 發佈：2019-02-18

    感覺小鹹兒最近懶散了很多啊！已經很久沒有更新自己的部落格內容了，最近小鹹兒在學習JavaScript，所以接下來，小鹹兒來給大家分享一下在JavaScript中簡單的CSS樣式。

  •     CSS：層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。

  •     CSS特點：1、豐富的樣式；2、易於使用和修改；3、多頁面應用；4、層疊；5、頁面壓縮；

    簡單的介紹了一下CSS是什麼，接下來就是主要學習的內容：

  • position屬性：
        static(預設)
        Relative
        Fixed（脫離文件流）
        absolute（脫離文件流）

    除此之外，還有一些其他的屬性：位置中的上下左右

  • 與top、left、bottom和right的連用：
        top元素頂端與距離瀏覽器上邊緣的距離
        left元素頂端與距離瀏覽器左邊緣的距離
        bottom元素頂端與距離瀏覽器下邊緣的距離
        right元素頂端與距離瀏覽器右邊緣的距離

    接下來的內容就是relative是幹什麼用的？

  •     在絕對定位預設是以瀏覽器作為參考的情況下：
        在relative定位的元素中，位置的層次主要為Z-Index屬性

    而對於樣式的顯示和隱藏Display的運用呢？則具體如下：

  • none（無）、block（塊）、inline（行級）
  • 標籤：div、span

    小鹹兒舉一個具體的示例：有層次的顯示位置

    首先新增一個HTML頁，在HTML中寫入程式碼，

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style
 
 type="text/css" >
        #dv1, #dv2 {
            width:300px;
            height :200px;
            position :absolute ;
            border :1px solid red;
        }
        #dv1 {
            top:50px;
            left:100px;
            background-color :blue ;
            z-index:0;
        }
        #dv2 {
            background-color :green ;
            z-index:0;
        }
    </style>
    <script type ="text/javascript">
        var dv = null;
        onload = function () {
            var dvs = document.getElementsByTagName("div");
            for (var i = 0; i < dvs.length; i++) {
                dvs[i].onclick = function () {
                    if (dv != null) dv.setAttribute("style", "z-index:0");
                    this.setAttribute("style", "z-index:1");
                    dv = this;
                };
            }
        };
    </script>
</head>
<body>
        <div id="dv1"></div>
        <div id="dv2"></div>
</body>
</html>

    頁面的顯示效果為：當滑鼠點選任意一層時，這一層都會顯示在最頂層

這裡寫圖片描述

    今天小鹹兒總結的都是最簡單的樣式應用，這些基礎都需要自己一步一個腳印的走過來，不斷的積累，夯實自己的基礎；

相關推薦

javaScript 操作Css樣式

1、JAVASCRIPT ADDCLASS 利用document.getElementById(“XX”)找到document物件、然後再通過addClass(“xxx”)修改其class值 document.getElementById(“XX”).addClass(“xxx”)

製作好看又非常簡單CSS樣式的顏色塊

首先，在html建立一個div塊 html檔案如下 <div class="color-lump"></div>我現在想要的是一個高80px，寬80px，背景色是綠色（#33cd5f）的顏色塊，於是 CSS檔案內容如下 .color-lump{

JavaScript-簡單的CSS樣式

    感覺小鹹兒最近懶散了很多啊！已經很久沒有更新自己的部落格內容了，最近小鹹兒在學習JavaScript，所以接下來，小鹹兒來給大家分享一下在JavaScript中簡單的CSS樣式。     CSS：層疊樣式表(英文全稱：Cascading Style

每天一個JavaScript實例-展示設置和獲取CSS樣式設置

width func height nts style scrip meta on() 屬性 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conte

webpack簡單教程(2)--使用less並生成獨立的CSS樣式

bsp oct console xtra put 項目信息 pub charset entry 在webpack中配置並使用less直接生成css樣式 　　1、在F盤中創建一個文件夾webpack-less 　　2、在文件夾中創建index.html <!DOCTY

css樣式與JavaScript

eat 改變 ret 全局 長度 如果 wid 小數點 alert css樣式 避免頁面大小不同導到樣式被改變 　　頁面最外層：像素的寬度 ===> 最外層設置絕對寬度 <body> <div class="pg-header"&

javascript 動態修改css樣式

csdn 知識 net posit name 知識點 顯示 span 部分 方法一：改變外聯css文件，這裏不講這個。 方法二：通過改變claaName來改變樣式，語法： obj.className = "style2"; //或者 obj.setAttribute(

javascript 動態修改css樣式方法匯總(四種方法)

tool geb code 標簽 AD java border nlog tro 在很多情況下，都需要對網頁上元素的樣式進行動態的修改。在JavaScript中提供幾種方式動態的修改樣式，下面將介紹方法的使用、效果、以及缺陷。 1、使用obj.className來修改樣

如何javascript獲取css中的樣式

obj.style.height只能獲取行間樣式,但是我們要怎麼獲取寫在css檔案中的樣式呢? 方法/步驟 首先我們要用一個新的方法currentStyle.這個方法由current和style兩個單片語成意思是:目前的樣式.也就是載入css檔案後取出來的樣式. cu

JavaScript指令碼化CSS樣式表

在使用JavaScript指令碼化操作CSS樣式表的時候，必須要使用到兩個物件： 　　1，元素物件：也就是<link>元素與<style>元素。 　　2，CSSStyleSheet物件：與當前文件關聯的在一起的樣式表，通過document.styleSheets獲取，該物件是隻讀的

CSS樣式的簡單使用手冊（學習筆記，還算詳細）

一.選擇器： 1. id選擇器 通過 <style> Td{ Color:red; } Or(特定的ID製作樣式) #td1{ Color:green; } </style> <p>nihao<p>

簡單練手 使用css樣式製作電子相簿

先貼上原始碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

Javascript 如何訪問 和 修改CSS樣式(網頁樣式)

如果想修改某個元素的CSS樣式，建議看一下我寫的另一篇文章： 注意：我說的是修改，而不是訪問。如果是修改的話可以看看上面《補充說明》這篇文章，但如果是訪問的話，就看本文中的這兩種方法，同樣，如果是訪問兼顧修改的話，也只看本文中的兩種方法（這是我瞭解到的兩種方法，如果有其

使用javascript全域性改變CSS樣式（網頁樣式）

之前寫過兩篇文章通過javascript改變CSS樣式，如 這兩篇文章都是改變區域性的CSS樣式，也就是改變某個元素的CSS樣式 實際上我們也可以通過改變連結CSS樣式表的href值來 實時切換網頁樣式，也就是 “改變模板風格”，也就相當於改變QQ空間的模板一樣，改變QQ

css樣式的簡單使用

    ####4.初識CSS####   ##4.1##     4.1.1CSS的基本語法結構     行內樣式，在html標籤中直接使用style屬性設定css樣式 <h2 styl

如何用JavaScript動態建立或增加CSS樣式表

    1。簡單的方法，不管不顧，直接這樣就可以： document.createStyleSheet().cssText = '標籤{color:red;' + // 這個註

javascript獲取元素的css樣式方法

之前瞭解到獲取元素css樣式的方法有三種： ①div.style ②getComputedStyle ③currentStyle 但對於三者的區別及詳細用法並不是特別瞭解，各種查資料各種測試終於瞭解到了詳細的用法，現在在此分享給大家，希望對大家有點用。 下面將對三種方式進

文字居中的幾種CSS簡單的樣式設定方法

首先說明在CSS中的vertical-align屬性只對(X)HTML元素中擁有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>這樣的元素是沒有v

javascript 動態修改css樣式方法

CSS ? 1 2 3 4 5 6 7 .style1{margin:10px auto ;background-color:#9999FF; display

javascript滑鼠點選實現改變CSS樣式

javascript通過改變元素class名達到間接改變CSS樣式 CSS:/* 字型連結樣式 */ td.firstLevelMenuClass a:link {color: #3E8BAC; text-decoration: none;} /* 未訪問的連結 */