Skip to content

Latest commit

 

History

History
72 lines (51 loc) · 1.67 KB

README.md

File metadata and controls

72 lines (51 loc) · 1.67 KB
Raw

##onepx

onepx is a javascript function to draw a retina 1px line without changing any css.

##How to use

<!--some elements with 1px border-->
<script src="onepx.js"></script>
<script>
    onepx("*");
</script>

##API

###onepx(selectors, [parentSelector][isListen]);

  • selectors：String, the selectors that need to be drew the retina 1px line, separated by commas.

  • parentSelector：String, targets's parent selector, used to reduce the scope of observing, default body

  • isListen：Boolean, observe the element if true, when element added dynamically, check them if need to drew 1px

###More Examples Elements match ".item" will be drew

onepx(".item");

Elements match ".item" or ".box" will be drew

onepx(".item, .box");

Elements match ".item" which parents match ".list" will be drew

onepx(".item", ".list");

Elements match ".appendItem" will be drew, even they are added dynamically

onepx(".appendItem", true);

If you want to custom style to 1px line, use like this

<li class="customItem" onepx=".customItem:acitve@border-color:blue&.customItem:hover@border-color:green"></li>

The rule is: selector@custom style&selector@custom style&...

As onepx draw 1px line after the onepx.js loaded, it may cause page flicker.If you mind, you can do like this:

<body style="visibility:hidden;">
...
    <script>
        onepx(".item");
        document.body.style.visibility = "visible";
    </script>
</body>

##DEMO

##License

onepx is available under the terms of the MIT License.