首页 > 编程语言> > javascript-JS代码不起作用,尝试在CSS课中进行演示

javascript-JS代码不起作用,尝试在CSS课中进行演示

2019-10-28 07:32:42 作者：互联网

但是有一个使用JS和CSS的演示.我一直在尝试修复它大约3-4个小时.

(仅供参考,经过2个小时的努力,我发现了一半的解决方案.我使用的是Safari,但应该使用-webkit-transform.)现在,我尝试将css直接添加到元素中,并且可以使用,但是使用JS不能使用.

我已经下载了jquery-1.11.3.js并将其导入.

当我单击时,没有任何反应.为什么！？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> </title>
    <link rel='stylesheet' type="text/css" href='LoginCSS.css' />
</head>
<body>
    <div id="banner">Please Login!</div>
    <form>
        <div>
            <label for="name">Name:</label>
            <input type="text" name="name" />
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="text" name="email" />
        </div>
        <div id="demoButton" class="default">
            Submit!
        </div>
    </form>
    <script src="jquery-1.11.3.js"></script>
    <script>
        $(function () {
            $('#demoButton').mousedown(function () {
                $(this).removeClass('default');
                $(this).addClass('shrink');
            });
            $('#demoButton').mouseup(function () {
                $(this).removeClass('shrink');
                $(this).addClass('default');
            }); 
        });
    </script>

</body>

LoginCSS.css

html {
    font-size: 16px;
    font-family: Verdana;   
}    
label {
    float: left;
    width: 75px;
}    
div {
    margin-bottom: .4em;
}    
#banner {
    background-color: lightblue;
    color: white;
    width: 100%;
    font-size : 4em;
    text-align: center;
}    
#demoButton {
    font-weight: bold;
    color: white;
    background-color: blue;
    height: 1.25em;
    width: 6em;
    text-align: center;
    padding-top: .3em;
    -webkit-user-select: none;
    cursor: crosshair;
}    
#demoButton::selection {
    color: black;
    background-color: yellow;
}    
.shrink{
    transform: scale(0.2, 0.2);
    -webkit-transform: scale(0.2, 0.2);
}    
.default {
    transform: none;
    -webkit-transform: none;
}

解决方法:

除了使用JQuery之外,您还可以使用CSS：active

#demoButton:active {
    transform: scale(0.2, 0.2);
    -webkit-transform: scale(0.2, 0.2);
}

文件：

http://www.w3schools.com/cssref/sel_active.asp

标签：visual-studio-code,css,javascript,jquery
来源： https://codeday.me/bug/20191028/1950809.html