javascript - 查询 : BoxShadow and Color Change using "OnChange"

Question

我是 Javascript 和 JQuery 的新手，所以请耐心等待。我想制作一个在使用颜色选择器时改变颜色的盒子阴影。为此，我使用 Jscolor.js .据我了解，我需要使用 Onchange 函数并使用 +this.color 来选择当前颜色。

但是我似乎无法让代码正常工作，我尝试到处阅读，但没有太多关于我需要的主题的信息。我创建了一个 JsFiddle 为例。

非常感谢您的提前帮助。

代码:

JavaScript:

$(document).ready(function(){ 
    $('#content').css('boxShadow', '+this.color inset 0 200px 400px -200px');
    $('#content').css('boxShadowColor', '+this.color'); 
});

HTML:

<div id="content">
    <p>
         <input class="color" onchange="$('#content').css('boxShadow','+this.color');" />
         <h1> This is a example.</h1>
</div> 
</div>

CSS:

.content {   
    -webkit-box-shadow: inset 0 200px 400px -200px #000);
    -moz-box-shadow: inset 0 200px 400px -200px #000);
    box-shadow: inset 0 200px 400px -200px #000; 
}

Answer 1

FIDDLE

HTML

<div id="content">
    <p>
        <input class="color" onchange="addNewBoxShadowStylesToHead('#frontcontent', '#'+this.color);" />
        <h1> This is a example.</h1>
    </p>
</div>

<div id="frontcontent">This div will have the effect</div>

JS

var head = document.head || document.getElementsByTagName('head')[0];

function addNewBoxShadowStylesToHead(selector,color) {
    var css = selector + '{-webkit-box-shadow: inset 0 200px 400px -200px ' +color+ ';' +
        '-moz-box-shadow: inset 0 200px 400px -200px ' + color + ';'+
        'box-shadow: inset 0 200px 400px -200px ' + color + '; }',
        style = document.createElement('style');

    style.type = 'text/css';
    if (style.styleSheet){
        style.styleSheet.cssText = css;
    } else {
        style.appendChild(document.createTextNode(css));
    }

    head.appendChild(style);
}

或更简单的 JS

function applyboxshadow(selector, color) {
    $(selector).css({
         '-webkit-box-shadow' : 'inset 0 200px 400px -200px ' + color,
        '-moz-box-shadow': 'inset 0 200px 400px -200px '+ color,
        'box-shadow': 'inset 0 200px 400px -200px '+ color
    });
}

这样称呼

<input class="color" onchange="applyboxshadow('#frontcontent', '#'+this.color);" />