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());
            });
  • 相关阅读:
    python笔记目录
    Django 的View(视图)系统
    051_Bootstrap 框架
    050_jQuery 事件
    049_jQuery 操作标签
    048_jQuery
    016-递归函数
    047_BOM_DOM
    046_JS
    045_CSS
  • 原文地址:https://www.cnblogs.com/chucklu/p/11769683.html
Copyright © 2011-2022 走看看