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);
}

OR Simpler 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);" />

JQuery：使用“OnChange”的BoxShadow和Color Change

1 个答案: