表格數據處理的2種寫法，偽元素和操作dom

ThinkSNS 發布于2019-08-23 14:41 / 2955人閱讀

摘要：寫法利用偽元素渲染偽元素之所以被稱為偽元素，是因為它們不是真正的頁面元素，但是其所有用法和表現行為與真正的頁面元素一樣，可以對其使用諸如頁面元素一樣的樣式，表面上看上去貌似是頁面的某些元素展現出來的，實際上是樣式展現的行為，因此被稱為偽元素

寫法1：利用偽元素渲染

偽元素：之所以被稱為”偽元素”，是因為它們不是真正的頁面元素，但是其所有用法和表現行為與真正的頁面元素一樣，可以對其使用諸如頁面元素一樣的css樣式，表面上看上去貌似是頁面的某些元素展現出來的，實際上是css樣式展現的行為，因此被稱為偽元素。
:before 和 :after 的特點
偽元素是通過樣式來達到元素效果的，也就是說偽元素不占用 dom 元素節點

偽元素不屬于文檔，所以 js 無法操作它
偽元素屬于主元素的一部分，因此點擊偽元素觸發的是主元素的click事件
偽元素的優缺點

優點

減少 DOM 節點數

讓 css 幫助解決部分 js 問題，讓問題變得簡單

缺點

*不利于 SEO
*無法審查元素，不利于調試

:before 和 :after常見使用場景
1.清楚浮動
2.利用 attr() 來實現某些動態功能
3.與 counter() 結合實現序號問題
4.特效使用

 
    
        
    

                
       // 以下為css樣式         
        .red
            color red
        .red:after
            content "% ↑"
            color red
        .red:before
            content "+"
            color red
        .green
            color green
        .green:after
            content "% ↓"
            color green

寫法2：操作dom進行渲染


                    
                    
                
        // 以下為操作dom的函數        
        formatterColumn (row, column, cellValue, index) {
            let key = column.property
            let h = this.$createElement
            if (row[key]) { // this.twoPercentArr.includes(key.toString())
                if (key.toString().includes("rate")) {
                    if (row[key] >= 0) {
                        return h("span", {
                            style: "color:red"
                        }, "+" + row[key] + "% ↑")
                    } else if (row[key] < 0) {
                        return h("span", {
                            style: "color:green"
                        }, row[key] + "% ↓")
                    }
                } else {
                    return row[key]
                }
            }
        },

GPU云服務器云服務器 java的表格元素 Error的2種方法 DOM元素偽元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100998.html

前端基本功-常見概念(三)

摘要：前端基本功常見概念一點這里前端基本功常見概念二點這里前端基本功常見概念三點這里超文本標記語言，顯示信息，不區分大小寫升級版的，區分大小寫可擴展標記語言被用來傳輸和存儲數據規范采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。前端基本功-常見概念(一) 點這里前端基本功-常見概念(二) 點這里前端基本功-常見概念(三) 點這里 1.HTML / XML / XHTML html...

happen 2019-08-02 14:05 評論0 收藏0
前端基本功-常見概念(三)

摘要：前端基本功常見概念一點這里前端基本功常見概念二點這里前端基本功常見概念三點這里超文本標記語言，顯示信息，不區分大小寫升級版的，區分大小寫可擴展標記語言被用來傳輸和存儲數據規范采用異步方式加載模塊，模塊的加載不影響它后面語句的運行。前端基本功-常見概念(一) 點這里前端基本功-常見概念(二) 點這里前端基本功-常見概念(三) 點這里 1.HTML / XML / XHTML html...

Steven 2019-08-23 14:41 評論0 收藏0
jQuery 效率提升建議

摘要：網上有一篇文章轉載比較泛濫，已經不知道原文作者了，里面針對效率提升建議非常科學，現在重新組織里面的內容并轉載。事實上，這種處理完全不必要。利用這一點，可以大大簡化事件的綁定。對象由于會對變更，速度會遠慢于函數。 jQuery簡潔通用的方法集把編碼者從繁重的工作中解脫出來，也拉低了進入javascript的門檻，初學者對瀏覽器兼容性一無所知的情況下，幾行代碼就可以寫出超炫的特效。網上有一...

liuhh 2019-06-28 14:11 評論0 收藏0
[ 好文分享 ] jQuery最佳實踐

摘要：所以，最佳選擇是。事實上，這種處理完全不必要。這樣的設計，使得讀取局部變量比讀取全局變量快得多。請看下面兩段代碼，第一段代碼是讀取全局變量第二段代碼是讀取局部變量第二段代碼讀取變量的時候，不用前往上一層作用域，所以要比第一段代碼快五六倍。轉自：http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html ...

mzlogin 2019-08-21 10:35 評論0 收藏0
jQuery最佳實踐

摘要：所以，最佳選擇是。事實上，這種處理完全不必要。這樣的設計，使得讀取局部變量比讀取全局變量快得多。請看下面兩段代碼，第一段代碼是讀取全局變量第二段代碼是讀取局部變量第二段代碼讀取變量的時候，不用前往上一層作用域，所以要比第一段代碼快五六倍。轉自：阮一峰日期： 2011年8月 4日http://www.ruanyifeng.com/blo... 上周，我整理了《jQuery設計思想》。...

senntyou 2019-08-20 15:54 評論0 收藏0