zoukankan      html  css  js  c++  java
  • 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.

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

    Initialization

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

    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());
            });
  • 相关阅读:
    203. Remove Linked List Elements
    86. Partition List
    143. Reorder List
    876. Middle of the Linked List
    246. Strobogrammatic Number
    202. Happy Number
    数据类型转换
    表达式
    面向对象
    对齐
  • 原文地址:https://www.cnblogs.com/chucklu/p/11769683.html
Copyright © 2011-2022 走看看