jquery - 在jquery中增加box-shadow css

标签 jquery css

box-shadow 的语法如下

box-shadow: h-shadow v-shadow blur spread color inset;

我想设置一个 jQuery 函数,每次单击按钮时,h 阴影、v 阴影和模糊都会增加 2 像素。它会是什么样子?

$('button[type=submit]').bind('click': function(){
                                   $('div').css('box-shadow'???, '+=2');
})

最佳答案

你可以尝试:

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style type="text/css">
    #test{ box-shadow: 2px 2px 2px; width: 100px; height: 100px;}
    button{ height: 20px; width: 100px}
    </style>
    <script type="text/javascript">
    $(document).ready(function() {
        $("button").click(function(){
            $("#test").css('box-shadow', incValues($("#test").css('box-shadow')));
        });
    });

    function incValues(values){
        var splits = values.split('px');
        splits[0] = splits[0].split(' ');
        splits[0] = splits[0][splits[0].length-1];
        return (parseInt(splits[0])+2) +'px ' + (parseInt(splits[1])+2) +'px ' + (parseInt(splits[2])+2) +'px ';
    }
    </script>
</head>
<body>
    <div id='test'></div>
    <br/>
    <button>Test</button>
</body>
</html>

关于jquery - 在jquery中增加box-shadow css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17396649/

相关文章:

javascript - 使用此 JavaScript 将 cookie 加载到变量中

html - 2个按钮彼此相邻的宽度边距与CSS

javascript - 如何 "relate"元素

javascript - jQuery - 计算 TEXTAREA 中的单词数

jquery - 更改ajax上的iFrame src完成

css - 是否可以在 HTML + CSS 中模拟 Mac Osx Finder 搜索突出显示?

css - Galaxy Galaxy fold 的媒体查询

css - Perl CGI。我可以确定我使用的 &lt;style&gt; 标签的顺序吗?

javascript - jQuery Dim 或在悬停时更改其他列表项

javascript - 通过多选隐藏/显示表格行