W3schoolCSS参考书快速查询
// ==UserScript==
// @name W3schoolCSS参考书快速查询
// @namespace http://tampermonkey.net/
// @version 0.12
// @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 = 'border-bottom: none; 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');
})();