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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類