input type color

<input type="color">

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

JavaScript

First, there's some setup. Here we establish some variables, setting up a variable that contains the color we'll set the color well to when we first load up, and then setting up a load handler to do the main startup work once the page is fully loaded.

?

1 2 3 4

var colorWell; var defaultColor = "#0000ff";   window.addEventListener("load", startup, false);

Initialization

Once the page is loaded, our load event handler, startup(), is called:

?

1 2 3 4 5 6 7

function startup() {   colorWell = document.querySelector("#colorWell");   colorWell.value = defaultColor;   colorWell.addEventListener("input", updateFirst, false);   colorWell.addEventListener("change", updateAll, false);   colorWell.select(); }

This gets a reference to the color <input> element in a variable called colorWell, then sets the color input's value to the value in defaultColor. Then the color input's input event is set up to call our updateFirst() function, and the change event is set to call updateAll(). These are both seen below.

Finally, we call select() to select the text content of the color input if the control is implemented as a text field (this has no effect if a color picker interface is provided instead).

 

使用JQuery

 /*color*/
    $('[type=color]').on('change', function () {
        var block = $(this).parents('.blockquote');
        block.find('.br-ccc').css('background-color', $(this).val());
        block.find('[type=text]').val($(this).val());        
    });

 

 $('#nav-page-styling [name]').each(function () {
            var value = page.model.Page[$(this).attr('name')];
            $(this).val(value);
            $(this).parents('.blockquote').find('.br-ccc').css('background-color', $(this).val());
        });

 

作者:Chuck Lu    GitHub