// ==UserScript==
// @name         W3schoolCSS参考书快速查询
// @namespace    http://tampermonkey.net/
// @version      0.11
// @description  	对于初学CSS的小伙伴，这是一个很友好的实用脚本，您可以在W3school网站中的CSS参考书中快速定位到你想要查询的CSS属性！从此解放您的鼠标滚轮！学习效率更高！
// @author       lansexiansheng
// @match        https://www.w3school.com.cn/cssref/index.asp
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    //创建一个空的div
    var newdiv = document.createElement('div');
    //选择id='wrapper'的元素
    var wrapper = document.querySelector('#wrapper');
    //将空的div添加到id='wrapper'的后面
    wrapper.appendChild(newdiv);
    //为空的div设置内容
    newdiv.innerHTML = "<ul id='myul'><li class='myli'><a class='mya' href='#aa'>A</a></li><li class='myli'><a class='mya' href='#bb'>B</a></li><li class='myli'><a class='mya' href='#cc'>C</a></li><li class='myli'><a class='mya' href='#dd'>D</a></li><li class='myli'><a class='mya' href='#ee'>E</a></li><li class='myli'><a class='mya' href='#ff'>F</a></li><li class='myli'><a class='mya' href='#gg'>G</a></li><li class='myli'><a class='mya' href='#hh'>H</a></li><li class='myli'><a class='mya' href='#ii'>I</a></li><li class='myli'><a class='mya' href='#jj'>J</a></li><li class='myli'><a class='mya' href='#kk'>K</a></li><li class='myli'><a class='mya' href='#ll'>L</a></li><li class='myli'><a class='mya' href='#mm'>M</a></li><li class='myli'><a class='mya' href='#nn'>N</a></li><li class='myli'><a class='mya' href='#oo'>O</a></li><li class='myli'><a class='mya' href='#pp'>P</a></li><li class='myli'><a class='mya' href='#qq'>Q</a></li><li class='myli'><a class='mya' href='#rr'>R</a></li><li class='myli'><a class='mya' href='#ss'>S</a></li><li class='myli'><a class='mya' href='#tt'>T</a></li><li class='myli'><a class='mya' href='#uu'>U</a></li><li class='myli'><a class='mya' href='#vv'>V</a></li><li class='myli'><a class='mya' href='#ww'>W</a></li><li class='myli'><a class='mya' href='#xx'>X</a></li><li class='myli'><a class='mya' href='#yy'>Y</a></li><li class='myli'><a class='mya' href='#zz'>Z</a></li><li class='myli'><a class='mya' href='#top'>TOP<a></li></ul>";
    //选中id='myul'的ul
    var myul = document.querySelector('#myul');
    //为ul设置stlye（待完善）
    myul.style.cssText = 'width: 50px;height: 650px;background-color: rgb(185, 183, 173);padding: 0;position: fixed;right:106px;top: 33px;border-radius: 10px;'
    //选中id='myli'的li
    var myli = document.querySelectorAll('.myli');
    //for循环为li设置style（待完善）
    for(i=0;i<myli.length;i++){
    myli.item(i).style.cssText = 'width: 25px;height: 25px;list-style-type: none;display: flex;justify-content: center;align-items: center;position: relative;left: 12px;'
    }
    //选中class='mya'的a
    var mya = document.querySelectorAll('.mya');
    //for循环为a标签设置style（待完善）
    for(i=0;i<mya.length;i++){
        mya.item(i).style.cssText = 'text-align: center;font-size: 1.2em;font-weight: 500;transition: 0.5s;color: rgb(5, 255, 255);'
        }
    //使用onmouseover和onmouseout实现mya:hover效果 */
    for(j=0;j<mya.length;j++){
        //为mya注册鼠标进入事件
        mya[j].onmouseover = function(){
            this.style.transform = 'scale(2)';
        }
        //为mya注册鼠标离开事件
        mya[j].onmouseout = function(){
            this.style.transform = '';
        }
    }

    //创建-选中-追加-添加
    //a
    var newa = document.createElement('a');
    var a = document.querySelectorAll('h3')[0];
    a.appendChild(newa);
    newa.setAttribute('name', 'aa');
    //b
    var newb = document.createElement('a');
    var b = document.querySelectorAll('h3')[1];
    b.appendChild(newb);
    newb.setAttribute('name', 'bb');
    //c
    var newc = document.createElement('a');
    var c = document.querySelectorAll('h3')[2];
    c.appendChild(newc);
    newc.setAttribute('name', 'cc');
    //d
    var newd = document.createElement('a');
    var d = document.querySelectorAll('h3')[3];
    d.appendChild(newd);
    newd.setAttribute('name', 'dd');
    //e
    var newe = document.createElement('a');
    var e = document.querySelectorAll('h3')[4];
    e.appendChild(newe);
    newe.setAttribute('name', 'ee');
    //f
    var newf = document.createElement('a');
    var f = document.querySelectorAll('h3')[5];
    f.appendChild(newf);
    newf.setAttribute('name', 'ff');
    //g
    var newg = document.createElement('a');
    var g = document.querySelectorAll('h3')[6];
    g.appendChild(newg);
    newg.setAttribute('name', 'gg');
    //h
    var newh = document.createElement('a');
    var h = document.querySelectorAll('h3')[7];
    h.appendChild(newh);
    newh.setAttribute('name', 'hh');
    //i
    var newi = document.createElement('a');
    var i = document.querySelectorAll('h3')[8];
    i.appendChild(newi);
    newi.setAttribute('name', 'ii');
    //j
    var newj = document.createElement('a');
    var j = document.querySelectorAll('h3')[9];
    j.appendChild(newj);
    newj.setAttribute('name', 'jj');
    //k
    var newk = document.createElement('a');
    var k = document.querySelectorAll('h3')[10];
    k.appendChild(newk);
    newk.setAttribute('name', 'kk');
    //l
    var newl = document.createElement('a');
    var l = document.querySelectorAll('h3')[11];
    l.appendChild(newl);
    newl.setAttribute('name', 'll');
    //m
    var newm = document.createElement('a');
    var m = document.querySelectorAll('h3')[12];
    m.appendChild(newm);
    newm.setAttribute('name', 'mm');
    //n
    /* var newn = document.createElement('a');
    var n = document.querySelectorAll('h3')[13];
    n.appendChild(newn);
    newn.setAttribute('name', 'nn'); */
    //o
    var newo = document.createElement('a');
    var o = document.querySelectorAll('h3')[13];
    o.appendChild(newo);
    newo.setAttribute('name', 'oo');
    //p
    var newp = document.createElement('a');
    var p = document.querySelectorAll('h3')[14];
    p.appendChild(newp);
    newp.setAttribute('name', 'pp');
    //q
    var newq = document.createElement('a');
    var q = document.querySelectorAll('h3')[15];
    q.appendChild(newq);
    newq.setAttribute('name', 'qq');
    //r
    var newr = document.createElement('a');
    var r = document.querySelectorAll('h3')[16];
    r.appendChild(newr);
    newr.setAttribute('name', 'rr');
    //s
    var news = document.createElement('a');
    var s = document.querySelectorAll('h3')[17];
    s.appendChild(news);
    news.setAttribute('name', 'ss');
    //t
    var newt = document.createElement('a');
    var t = document.querySelectorAll('h3')[18];
    t.appendChild(newt);
    newt.setAttribute('name', 'tt');
    //u
    var newu = document.createElement('a');
    var u = document.querySelectorAll('h3')[19];
    u.appendChild(newu);
    newu.setAttribute('name', 'uu');
    //v
    var newv = document.createElement('a');
    var v = document.querySelectorAll('h3')[20];
    v.appendChild(newv);
    newv.setAttribute('name', 'vv');
    //w
    var neww = document.createElement('a');
    var w = document.querySelectorAll('h3')[21];
    w.appendChild(neww);
    neww.setAttribute('name', 'ww');
    //x
    /* var newx = document.createElement('a');
    var x = document.querySelectorAll('h3')[22];
    x.appendChild(newx);
    newx.setAttribute('name', 'xx'); */
    //y
    /* var newy = document.createElement('a');
    var y = document.querySelectorAll('h3')[23];
    y.appendChild(newy);
    newy.setAttribute('name', 'yy'); */
    //z
    var newz = document.createElement('a');
    var z = document.querySelectorAll('h3')[22];
    z.appendChild(newz);
    newz.setAttribute('name', 'zz');
    //top
    var top = document.querySelector('#header');
    var newtop = document.createElement('a');
    top.appendChild(newtop);
    newtop.setAttribute('name', 'top');

})();