刘万林的博客

文章目录

淘宝、天猫「颜色分类」显示优化

　　短短的几行代码，实现 淘宝“颜色分类”的显示优化。
　　PC端中淘宝详情页“颜色分类”显示可谓是十分的难用，只有显示一张小小的图片，没有文字说明，如果需要看文字说明还需要鼠标移动到图片上才能显示。如果分类少还好说，分类多这功能简直就是鸡肋。
　　相比，APP端的颜色分类有显示图片，也有文字说明，一目了然。如何利用 猴油(Tampermonkey) 插件的方式，优化排版？

效果图

原来排版：

使用插件后排版：

代码

需要实现上面的效果，仅仅需要下面的几行代码就可以达到效果。如果使用，可直接进入：猴油插件安装greasyfork

// ==UserScript==
// @icon         https://market.m.taobao.com/favicon.ico
// @name         淘宝、天猫「颜色分类」显示优化
// @namespace    https://github.com/ekoooo
// @version      0.1
// @description  原样式：PC 端宝贝详情「颜色分类」为图片列表，需鼠标移动到上面才显示分类文字。➡️优化后：类似 APP 端显示文字，一目了然
// @author       liuwanlin
// @match        *://*.taobao.com/*
// @match        *://*.tmall.com/*
// @match        *://*.tmall.hk/*
// @match        *://*.liangxinyao.com/*
// @grant        GM_addStyle
// ==/UserScript==
GM_addStyle(`
.tb-prop .tb-img li a {
    background-position-x: 5px !important;
    background-size: 30px 30px !important;
    width: inherit !important;
}
.tb-prop .tb-img li span {
    display: block !important;
    text-indent: initial;
    padding: 0 10px !important;
    margin-left: 30px;
}
`);

猴油插件安装 greasyfork