65.9K
CodeProject 正在变化。 阅读更多。
Home

kLib-CSS

Anshu Krishna
starIconstarIconstarIconstarIconstarIcon

5.00/5 (7投票s)

2013年6月11日

CPOL

4分钟阅读

viewsIcon

23745

downloadIcon

177

一个用于动态 CSS 的小型 JavaScript 库。

要快速演示，请单击此处。

引言

在编写所有供应商前缀的 CSS 时，我曾认为一定有更好的方法。在花了一个小时测试了网上许多可用解决方案后，我选择了SCSS/SASS。虽然它没有直接的解决方案，但我能够使用 mixin 为每个带有供应商前缀的 CSS3 属性创建模板，然后使用它们。

SASS 允许我们使用变量来设置 CSS 值。这是一个额外的优势（SASS 还有许多其他很酷的功能。请参阅其主页了解更多信息）。SASS 在部署前进行编译。这限制了它的服务器端优势。能够在客户端使用这种方法将非常酷。

受此想法的启发，我开始编写kLib-css.js。虽然我决定将其与 kLib 库一起打包，但这个微型库与 kLib 主库没有依赖关系。因此，即使您没有包含 kLib 主库，也可以使用它。

kLib-CSS 提供了一种动态编写 CSS 的方法。因此，可以实时更改样式表，从而使编写酷炫效果的代码变得非常容易。由于我们通过 JavaScript 设置 CSS，因此我们可以使用变量来编写通用样式。

kLib-CSS 还提供了供应商前缀的简写，使编码者的生活更轻松，并提高了代码的可读性。

链接到关于：kLib（主库）的文章

特点

kLib-CSS 提供了一个名为“css”的全局对象构造函数。它以前置 CSS 选择器作为参数。还有一个名为 debugMode 的第二个可选布尔参数。如果传递了 debugMode 并且其值为 true，则调试器控制台将记录生成的 CSS。“css”对象的属性是

  • node：文档头部新创建的样式元素的引用。
  • set(property, value) 或 set({ prop1: val1, prop2: val2,.....})：此函数能够设置样式属性。
  • unset(property,[another property,.....])：此函数能够移除样式属性。
  • remove()：此函数从文档头部移除样式。

示例

现在让我们看一些例子。假设我们想设置以下 CSS

.myDiv {
    -webkit-box-shadow: 0px 0px 20px #00F;
    -moz-box-shadow: 0px 0px 20px #00F;
    -ms-box-shadow: 0px 0px 20px #00F;
    -o-box-shadow: 0px 0px 20px #00F;
    box-shadow: 0px 0px 20px #00F;
}

供应商前缀简写将在此处帮助我们。要添加供应商前缀，我们将其表示为 --> @Prefix_name。对于多个前缀，我们只需将它们级联在一起。例如 --> @webkit@moz。对于最后一个没有供应商前缀的行，我们只需写 --> @。所有这些前缀必须与属性名用分号和空格隔开，例如 --> "; " 所以 kLib-CSS 对所需 CSS 的替代代码是

css(".myDiv").set("@webkit@moz@ms@o@; box-shadow", "0px 0px 20px #00F");

供应商前缀也可用于值。例如

.myDiv {
    display : -webkit-inline-box;
    display : -moz-inline-box;
    display : inline-box;
}

可以写成

css(".myDiv").set
("display", "@webkit@moz@; inline-box");

也可以通过数组手动设置不同的回退值。例如

.myDiv {
    background: #E4E8F1;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(62%,#E4E8F1));
    background: -webkit-linear-gradient(top, white 0%,#E4E8F1 62%);
    background: -moz-linear-gradient(top, white 0%, #E4E8F1 62%);
    background: -o-linear-gradient(top, white 0%,#E4E8F1 62%);
    background: -ms-linear-gradient(top, white 0%,#E4E8F1 62%);
    background: linear-gradient(to bottom, white 0%,#E4E8F1 62%);
}

可以写成

css(".myDiv").set("background", [
   "#E4E8F1",
   "-webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(62%,#E4E8F1))",
   "@webkit@moz@o@ms@; linear-gradient(top, white 0%,#E4E8F1 62%)"
]);

值得记住的有趣之处在于，所有这些 CSS 生成都是在客户端动态进行的，因此也可以动态更改。让我们看一个非常基本的例子。假设我们有

<style type="text/css">
    .myDiv {
        width : 100px;
        height : 100px;
        color : red;
        background : blue;
    }
</style>
<div class="myDiv"> Hello </div>
<div class="myDiv"> Test Div 2 </div>
<button id="myBtn"> Change Background </button>

并且我们想将所有类为 myDiv 的元素的背景颜色更改为黄色。那么当前流行的做法是创建另一个带有新样式设置的类，并将此类添加到所有元素中（或根据使用情况将当前类替换为新类）。例如

<style type="text/css">
    .myDiv {
        width : 100px;
        height : 100px;
        color : red;
        background : blue;
    }
    .myDiv2 {
        background : yellow;
    }
</style>
<div class="myDiv"> Hello </div>
<div class="myDiv"> Test Div 2 </div>
<button id="myBtn"> Change Background </button>
<script type="text/javascript">
    document.getElementById("myBtn").onclick = function() {
        var list = document.querySelectorAll("mydiv");
        for(var i = 0; i < list.length; i++)
            list[i].className="myDiv myDiv2";
    }
</script>

快速查看“Can I Use It”表明 querySelector 在现代浏览器中支持相当不错，但旧浏览器（如 IE7）缺乏对此函数支持。另一种方法是包含大型 jQuery 库，然后使用它的选择器。但是有了 kLib-CSS，我们就无需担心这些。由于 CSS 是动态生成的，因此我们不需要第二个 CSS 类。我们可以简单地修改现有的 CSS 类，浏览器会自动查找匹配的元素并更改其外观。这是 kLib-CSS 代码

<div class="myDiv"> Hello </div>
<div class="myDiv"> Test Div 2 </div>
<button id="myBtn"> Change Background </button>
<script type="text/javascript">
    var myCss = css(".mydiv").set({
        width : "100px",
        height : "100px",
        color : "red",
        background : "blue"
    });
    document.getElementById("myBtn").onclick = function() {
        myCss.set("background", "yellow");
    }
</script>

我们还可以通过使用变量来重构具有几乎相同属性值的多个 CSS。例如

<style type="text/css">
    .myDiv1 {
        width : 100px;
        height : 100px;
        color : red;
        background : blue;
    }
    .myDiv2 {
        width : 100px;
        height : 100px;
        color : red;
        background : yellow;
    }
    .myDiv3 {
        width : 100px;
        height : 100px;
        color : red;
        background : green;
    }
    .myDiv4 {
        width : 100px;
        height : 100px;
        color : red;
        background : white;
    }

可以重构为

var commonStyle = {
    width : "100px",
    height : "100px",
    color : "red"
};
css("myDiv1").set(commonStyle).set("background", "blue");
css("myDiv2").set(commonStyle).set("background", "yellow");
css("myDiv3").set(commonStyle).set("background", "green");
css("myDiv4").set(commonStyle).set("background", "white");

如果您在网页中大量使用 CSS3，那么 kLib-CSS 也可以作为样式表的替代方案，因为它生成的代码更小。让我们用kLib-Overlay.css 来测试一下，其大小为 1638.4 字节（1.6 KB）。
（这只是一个例子。这里 kLib-css.js 本身的大小会对减少量产生不利影响。实际上，您将用 kLib-CSS 代码替换相当大的样式表。所以 1.81kb 的 kLib-CSS 不重要。）

/*kLib-overlay.css*/
.klib-overlay-main-div {
    display: block;
    background: rgba(0,0,0,0.7);
    color: #FFF;
    position: absolute;
    overflow: auto;
    text-align: center;
    width: 100%;
}

.klib-overlay-container-div {
    display: inline-block;
    z-index: 5;
    position: relative;
}

.klib-alert {
    font-size: larger;
    text-align: center;
    word-wrap: break-word;
    padding: 30px 70px;
    background: #555;
    border-radius: 7px;
    border: 1px solid #FFF;
    -webkit-box-shadow: 0px 0px 50px #FFF;
    -moz-box-shadow: 0px 0px 50px #FFF;
    -o-box-shadow: 0px 0px 50px #FFF;
    -ms-box-shadow: 0px 0px 50px #FFF;
    box-shadow: 0px 0px 50px #FFF;
}

.klib-alert > button {
    width: 70px;
    height: 30px;
}

.klib-confirm {
    font-size: larger;
    word-wrap: break-word;
    padding: 30px 70px;
    background: #555;
    border-radius: 7px;
    border: 1px solid #FFF;
    -webkit-box-shadow: 0px 0px 50px #FFF;
    -moz-box-shadow: 0px 0px 50px #FFF;
    -o-box-shadow: 0px 0px 50px #FFF;
    -ms-box-shadow: 0px 0px 50px #FFF;
    box-shadow: 0px 0px 50px #FFF;
}

.klib-confirm-ok {
    width: 70px;
    height: 30px;
}

.klib-confirm-cancel {
    width: 70px;
    height: 30px;
    margin-left: 10px;
}

.klib-prompt {
    font-size: larger;
    word-wrap: break-word;
    padding: 30px 70px;
    background: #555;
    border-radius: 7px;
    border: 1px solid #FFF;
    -webkit-box-shadow: 0px 0px 50px #FFF;
    -moz-box-shadow: 0px 0px 50px #FFF;
    -o-box-shadow: 0px 0px 50px #FFF;
    -ms-box-shadow: 0px 0px 50px #FFF;
    box-shadow: 0px 0px 50px #FFF;
}

.klib-prompt-ok {
    width: 70px;
    height: 30px;
}

.klib-prompt-cancel {
    width: 70px;
    height: 30px;
    margin-left: 10px;
}

等效的 kLib-CSS 代码是 975 字节。

/*kLib-overlay-css.js*/
(function () {
    css(".klib-overlay-main-div").set({
        display : "block",
        background : "rgba(0,0,0,0.7)",
        color : "#FFF",
        position : "absolute",
        overflow : "auto",
        "text-align" : "center",
        width : "100%"
    });
    css(".klib-overlay-container-div").set({
        display : "inline-block",
        "z-index" : "5",
        position : "relative"
    });
    var oc = {
        "font-size" : "larger",
        "word-wrap" : "break-word",
        padding : "30px 70px",
        background : "#555",
        "border-radius" : "7px",
        border : "1px solid #FFF",
        "@webkit@moz@o@ms@; box-shadow" : "0px 0px 50px #FFF"
    },
    ob = {
        width : "70px",
        height : "30px"
    };
    css(".klib-alert").set(oc).set("text-align", "center");
    css(".klib-alert > button").set(ob);
    css(".klib-confirm").set(oc);
    css(".klib-confirm-ok").set(ob);
    css(".klib-confirm-cancel").set(ob).set("margin-left", "10px");
    css(".klib-prompt").set(oc);
    css(".klib-prompt-ok").set(ob);
    css(".klib-prompt-cancel").set(ob).set("margin-left", "10px");
})();

kLib-CSS 减少了 663.4 字节。kLib-CSS 替代代码的大小是 CSS 代码的 0.595%，并且具有动态操作的可能性。

您对 kLib-CSS 有何看法？

请提供您的建议和反馈。

© . All rights reserved.