通过控制data属性，为游戏小人显示得分

css
Posted by Owen on December 14, 2015

游戏小人显示得分

今天在youtobe上看到了一个视频关于data属性的一些使用，感觉挺有用的，特写篇博文分享之

具体视频

先是弄出一个小人

.sprite {
        background: url(./demopic/char113.png);
        width: 32px;
        height: 30px;
        background-position: 128px 0;
        position: relative;
        top: 50px;
        left: 50px;
    }
<div class="sprite" data-score=""></div>

然后通过js获取.sprite并且设置它的得分data-score

var character =  document.querySelector(".sprite");
character.dataset.score = 10;

然后设置分数显示，通过css获取data-score的数据

.sprite::after {
        content:attr(data-score); // attr() 可以获取html标签的属性值
        position: absolute;
        top: -20px;
        left: -10px;
        opacity: 0;
        -webkit-transition: .75s;
    }

.sprite:hover::after {
        opacity: 1;
    }

当鼠标滑过的时候，小人头顶上就能显示对应的分数

我们还可以给不同的分值显示不同的颜色

.sprite[data-score='10']::after {
        color : yellow;
        text-shadow: 0 0 2px blue;
    }

.sprite[data-score='60']::after {
    color : red;
    text-shadow: 0 0 2px blue;
}

但是css中并不支持值域判断，所以分数判断还是需要写在js里比较好

var character =  document.querySelector(".sprite");
var style     =  document.querySelector("#style");

var pseudo    =  "";
character.dataset.score = 60;  // 这里可以控制

if(character.dataset.score>=60) {
    pseudo=".sprite::after {color : red;text-shadow: 0 0 2px blue;}";
}else {
    pseudo=".sprite::after {color : yellow;text-shadow: 0 0 2px blue;}"
}

style.innerHTML += pseudo;

demo

- CATALOG -