成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

表格數(shù)據(jù)處理的2種寫法，偽元素和操作dom

ThinkSNS / 2988人閱讀

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

寫法1：利用偽元素渲染

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

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

優(yōu)點

減少 DOM 節(jié)點數(shù)

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

缺點

*不利于 SEO
*無法審查元素，不利于調(diào)試

:before 和 :after常見使用場景
1.清楚浮動
2.利用 attr() 來實現(xiàn)某些動態(tài)功能
3.與 counter() 結(jié)合實現(xiàn)序號問題
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的函數(shù)        
        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]
                }
            }
        },

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/100998.html

相關(guān)文章

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

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

    happen 評論0 收藏0

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

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

    Steven 評論0 收藏0

  • jQuery 效率提升建議

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

    liuhh 評論0 收藏0

  • [ 好文分享 ] jQuery最佳實踐

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

    mzlogin 評論0 收藏0

  • jQuery最佳實踐

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

    senntyou 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<