js腳本化css

来源:https://www.cnblogs.com/xw-01/p/18266103
-Advertisement-
Play Games

腳本化CSS 我們剛講過如何獲取和設置行內樣式的值,但是我們開發不會所有樣式都寫在行內,同時js沒法獲取內嵌樣式表和外部樣式表中的值. 事實上DOM提供了可靠的API，得到計算後的樣式。 1. 獲取計算樣式表 只讀，不可寫 獲取的值是計算後的絕對值，不是相對值 window.getComputedS ...


腳本化CSS

我們剛講過如何獲取和設置行內樣式的值,但是我們開發不會所有樣式都寫在行內,同時js沒法獲取內嵌樣式表和外部樣式表中的值.

事實上DOM提供了可靠的API，得到計算後的樣式。

1. 獲取計算樣式表

只讀，不可寫
獲取的值是計算後的絕對值，不是相對值

window.getComputedStyle(ele,null).attr IE8以上
ele.currentStyle IE8及其以下

例子:

window.getComputedStyle(ele).attr
// 當然window是可以省略的
getComputedStyle(ele).attr

好用的東西，一定不相容。所以IE6、7、8不相容

附加在元素身上的currentStyle屬性，它表現和style點語法一樣，使用駝峰式訪問

例子

oDiv.currentStyle.width

之前講過,點操作符必須符合標識符的規範,所以使用點操作符獲取有連字元的屬性要寫成駝峰式

getComputedStyle(oDiv).backgroundColor;
oDiv.currentStyle.backgroundColor;

中括弧操作符,因為中括弧內寫字元串,所以不用遵循標識符規範,就可以保留連字元的寫法

getComputedStyle(oDiv)['background-color'];
oDiv.currentStyle['background-color'];

顏色值在高級瀏覽器中是rgb()格式，低級瀏覽器中就是原樣輸出。

示例:

封裝getStyle(dom,attr)相容性

實際上，老司機都不這麼做。我們不關心你的版本是什麼，我只關心你的能力。

function getStyle(ele,attr){
	if(window.getComputedStyle){
		return getComputedStyle(ele)[attr];
	}else{
		return ele.currentStyle[attr];
	}
}

function getStyle(dom,attr){
	if(dom.currentStyle){  // IE8 及其一下
		return dom.currentStyle[attr]
	}else{
		return getComputedStyle(dom,null)[attr]
	}
}

現在我們要在一個輪子，就是封裝一個函數，這個函數接收兩個參數，第一個是對象，第二個是屬性名。

getStyle(obj,”padding-left”);
getStyle(obj,”paddingLeft”);

這個函數返回的是這個屬性值的計算後的樣式。更牛逼的是，我們無論用戶輸入的是駝峰還是非駝峰，都讓這個函數魯棒。

2. 操作元素樣式

我們知道前面學過瞭如果設置樣式通過行內style來設置元素樣式,

那麼我們就可以通過獲取計算樣式值,然後修改

var oBox = document.getElementById('box');
var wid = parseInt(getStyle(oBox,'width'));
oBox.onclick = function(){
	wid += 20;
	console.log(wid);
	oBox.style.width = wid + 'px';
}

3. 快捷位置和尺寸

DOM已經提供給我們計算後的樣式，但是還覺得不方便，所以DOM又提供給我們一些API：

獲取元素的顯示尺寸(數字類型的值)

ele.offsetWidth width+左右padding+左右border
ele.offsetHeight height+上下padding+上下border
ele.offsetLeft 水平距離 (常用)
ele.offsetTop 豎直距離 (常用)
ele.clientWidth width+左右padding (常用)
ele.clientHeight height+上下padding (常用)
dom.clientLeft 上邊框的width (可不記)
dom.clientTop 左邊框的width (可不記)

3.1. offsetWidth和offsetHeight

全線相容，是自己的屬性，和別的盒子無關。

一個盒子的offsetWidth值就是自己的 width+左右padding+左右border的寬度(說白就是盒子的大小)

總結一下，全線相容。

3.2. offsetLeft屬性和offsetTop

這兩個屬性的相容性非常差，不要著急，我們慢慢來看。

IE9、IE9+、Chrome等高級瀏覽器：

一個元素的offsetLeft值，就是這個元素左邊框外，到自己的offsetParent對象的左邊框內的距離

每一個元素，天生都有一個屬性，叫做offsetParent

就是自己祖先元素中，離自己最近的已經定位的元素，如果自己的祖先元素中，沒有任何盒子進行了定位，那麼offsetParent對象就是body。

op.offsetParent;  // 查找離自己最近的定位父級

無論這個盒子自己是否定位，自己的offsetParent就是按照上述方法尋找。

IE6、IE7：

IE6、7的offsetParent對象是誰，和高級瀏覽器有非常大的不同。

情形1：自己如果沒有定位屬性，那麼自己的offsetParent對象就是自己的祖先元素中離自己最近的有width或者有height的元素：

<div class="box1">
	<div class="box2">  → 你好，我有寬度 , offsetParent
		<div class="box3"> → 你好，我沒有寬高 
			<p></p>   → 你好，我沒有定位
		</div>
	</div>
</div>

情形2：自己如果有定位屬性

那麼自己的offsetParent就是自己祖先元素中離自己最近的有定位的元素。

<div class="box1">
	<div class="box2">
		<div class="box3"> → 你好，我沒有寬高，有定位  , offsetParent
			<p></p>   → 你好，我沒有定位
		</div>
	</div>
</div>

數值就是自己的左外邊框到offsetParent對象的左內邊框的值。

IE8：

IE8的offsetParent是誰呢？和高級瀏覽器一致：

無論自己是否定位，自己的offsetParent就是自己祖先元素中，離自己最近的已經定位的元素。

這一點，沒有任何相容問題！

相容性解決辦法，不是能力檢測，也不是版本檢測，而是善用這個屬性，要確保屬性的使用條件：

這樣的話，所有瀏覽器的值都是一樣的，offsetLeft、offsetTop值是number類型的，可以直接參与運算，不需要parseInt()

3.3. clientWidth和clientHeight

clientWidth就是自己的width+padding的值。 也就是說，比offsetWidth少了border。

如果盒子沒有高度，用文字撐的，IE6 clientHeight是0，其他瀏覽器都是數值。

以上6個屬性要銘記於心，就offsetLeft、offsetTop比較鬧騰，但是合理使用，也沒相容問題了

3.4. clientLeft和clientTop

這兩個屬性沒有太大的意義就是上邊框和左邊看的寬度而已

4. 獲取元素的有定位屬性的父級

ele.offsetParent
如果沒有定位父節點，則返回body

封裝getElementPosition函數,獲取元素相對於文檔的坐標

function getElePos(dom){  // 獲取元素相對於文檔的坐標
	var x = dom.offsetLeft;
	var y = dom.offsetTop;
	var parent = dom.offsetParent;
	while(parent !== null){
		x += parent.offsetLeft;
		y += parent.offsetTop;
		parent = parent.offsetParent;
	} 
	return {
		x: x,
		y: y
	}
}

5. 獲取元素的滾動值

5.1 獲取滾動元素的寬高

當元素實際內容超過設置的內容時

dom.scrollWidth ==> 元素實際內容的width
dom.scrollHeight ==> 元素實際內容的height

5.2 獲取元素的滾動距離(數字類型的值)

dom.scrollLeft 滾動的水平距離
dom.scrollTop 滾動的豎直距離

5.3 滾動距離的相容寫法

  • 獲取滾動條的滾動距離 IE8以上

window.pageXOffset 頁面滾動的水平距離
window.pageYOffset 頁面滾動的豎直距離

  • 獲取滾動條的滾動距離 IE8及其以下

document.documentElement.scrollLeft IE7,8
document.documentElement.scrollTop IE7,8
document.body.scrollLeft
document.body.scrollTop
在IE8以上相容性比較混亂,在使用時兩個值相加，因為這兩對值不能同時存在

封裝getScrollOffset相容性函數

function getScrollOffset(){
	if(window.pageYOffset){
		return {
			x: window.pageXOffset,
			y: window.pageYOffset
		}
	}else{
		return {
			x: document.documentElement.scrollLeft + document.body.scrollLeft,
			y: document.documentElement.scrollTop + document.body.scrollTop;
		}
	}
}

6. 獲取瀏覽器視窗的尺寸

IE8以上

window.innerWidth 視窗的寬度(包含滾動條)
window.innerHeight 視窗的高度(包含滾動條)

IE8及其以下

document.documentElement.clientWidth 標準模式下
document.documentElement.clientHeight

(在Chrome,Firefox,IE7,IE8不包含滾動條,在IE8以上包含滾動條)

document.body.clientWidth 怪異模式下
document.body.clientWidth

檢測瀏覽器是不是在怪異模式下

dowument.compatMode === 'BackCompat'

封裝getViewportOffset相容性函數

function getViewportOffset(){
	if(window.innerWidth){  
		return {
			x: window.innerWidth,
			y: window.innerHeight
		}
	}else{
		if( document.compatMode === 'BackCompat'){
			return {
				x: document.body.clientWidth,
				y: document.body.clientHeight
			}
		}else{
			return {
				x: document.documentElement.clientWidth,
				y: document.documentElement.clientHeight
			}
		}
	}
}

7. 設置滾動條的滾動距離

瀏覽器頁面滾動

window.scrollTo(x,y) 讓滾動條滾動到指定位置

window.scrollBy(x,y) 讓滾動條滾動指定距離

頁面元素滾動

ele.scrollTo(x,y)

ele.scrollBy(x,y)

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Nuxt3 的生命周期和鉤子函數（七）
    摘要：文章闡述了Nuxt3中Nitro生命周期鉤子的使用，如nitro:config自定義配置、nitro:init註冊構建鉤子、nitro:build:before/after調整構建設置及處理公共資產、prerender:routes擴展預渲染路由、build:error捕獲構建錯誤，通過示例代... ...
  • 前端如何用密文跟後端互通？原來那麼簡單！
    ‍ 寫在開頭 點贊 + 收藏 學會 後端：密碼得走密文哇！ 我：base64？md5？ 後端:這次不行哇，新來的測試不好糊弄呢！必須要國密sm2加密捏 我: 好吧，看我的。 我這邊使用的是sm-crypto，當然也有很多優秀的庫如：forge,我在業務上搭配jszip做過上傳zi ...
  • 【動畫進階】類 ChatGpt 多行文本打字效果
    今天我們來學習一個有意思的多行文本輸入打字效果，像是這樣： 這個效果其實本身並非特別困難，實現的方式也很多，在本文中，我們更多的會聚焦於整個多行打字效果最後的動態游標的實現。 也就是如何在文本不斷變長，在不確定行數的情況下，讓文字的最末行右側處，一直有一個不斷閃爍的游標效果： 單行文本打字效果 在此 ...
  • 將File對象轉換為URL
    ★ 將File對象轉換為URL的兩種方式 方式一. URL.createObjectURL(object) 返回了一個DOMString包含了一個對象URL，該URL可用於指定源 object的內容。其參數為用於創建 URL 的File 對象、Blob 對象或者 MediaSource 對象。​ 方 ...
  • [JS] 數據類型與特殊值的判斷方法
    JavaScript 是一種弱類型語言，開發者經常需要判斷變數的數據類型。本文介紹了 typeof、instanceof、Object.prototype.toString.call 等常用的判斷方法，並討論了 typeof null 返回 object 的歷史原因。此外，還涵蓋瞭如何判斷箭頭函數、... ...
  • Vue - 入門
    零：前端目前形勢 前端的發展史 HTML(5)、CSS(3)、JavaScript(ES5、ES6)：編寫一個個的頁面 -> 給後端(PHP、Python、Go、Java) -> 後端嵌入模板語法 -> 後端渲染完數據 -> 返回數據給前端 -> 在瀏覽器中查看 Ajax的出現 -> 後臺發送非同步請 ...
  • Nuxt3 的生命周期和鉤子函數（六）
    摘要：本文深入解析了Nuxt3框架中的多個核心生命周期鉤子和組件註冊功能，包括imports:sources、imports:extend、imports:context、imports:dirs、components:dirs及components:extend，通過實例代碼指導開發者如何在不同場... ...
  • 基於axios 將網路圖片地址轉換為file對象
    ★ 背景說明 在瀏覽器環境中，由於安全性限制，不能直接將網路圖片地址轉換成 File 對象。File 對象是用戶在客戶端上傳文件時才能創建的，而不能由前端代碼直接將網路圖片地址轉換成 File 對象。 ★ 解決方案 如果你想要將網路圖片地址轉換成 Fie 對象，你需要先將圖片下載到客戶端，然後再將其 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類