gpt4 book ai didi

javascript - 原型(prototype)库/CSS

转载 作者:行者123 更新时间:2023-11-28 16:49:31 25 4
gpt4 key购买 nike

所以我正在学习如何使用原型(prototype),并且在大多数情况下它非常简洁,但我在处理一个元素时注意到 $( ).setStyle({}) 不起作用。我不知道为什么,我什至找到了一个教程,将他们的 setStyle 示例复制粘贴到 Brackets 中,但我仍然一无所获。有人知道为什么吗?

示例代码如下:

<!DOCTYPE html>
<html>
<head>
<title>Prototype examples</title>
<script type="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script>
function setColor(){
$('test').setStyle({
backgroundColor: '#900',
fontSize: '12px'
});
}
</script>
</head>
<body>
<p id="test">Click the button to see the result.</p>
<input type="button" value="Click" onclick="setColor();"/>
</body>
</html>

这是我的元素代码:

<!DOCTYPE html>
<html>
<head>
<title>Protoype</title>
<h1>Lighting Effects</h1>
<style>
#div1{
width:600px;
height:350px;
background-color: #6699cc;
}
#div2{
background-color: #aaaaff;
width:80px;
height:80px;
padding:20px;
position:relative;
left:240px;
top:105px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script>
function btn1(){
$("div1").setStyle({
background:'radial-gradient(at top left, white, #6699cc)';
});
$("div2").setStyle({
boxShadow:'10px 10px 10px #808080';
});
}
function btn2(){
$("div1").setStyle({
background:'radial-gradient(at top right, white, #6699cc)';
});
$('div2').setStyle({
boxShadow:'-10px 10px 10px #808080';
});
}
function btn3(){
$('div1').setStyle({
background:'radial-gradient(at bottom, white, #6699cc)';
});
$('div2').setStyle({
boxShadow:'0px -10px 10px #808080';
});
}
</script>
</head>
<body>
<div id="div1">
<div id="div2">
LIGHTS:<br/>
<input type="button" id="btn1" value="Top Left" onClick="btn1()"/><br/>
<input type="button" id="btn2" value="Top Right" onClick="btn2()"/><br/>
<input type="button" id="btn3" value="Bottom" onClick="btn3()"/><br/>
</div>
</div>
</body>
</html>

提前致谢!

最佳答案

脚本有语法错误。删除不必要的分号,如下所示:

<script>
function btn1(){
$("div1").setStyle({
background:'radial-gradient(at top left, white, #6699cc)'
});
$("div2").setStyle({
boxShadow:'10px 10px 10px #808080'
});
}
function btn2(){
$("div1").setStyle({
background:'radial-gradient(at top right, white, #6699cc)'
});
$('div2').setStyle({
boxShadow:'-10px 10px 10px #808080'
});
}
function btn3(){
$('div1').setStyle({
background:'radial-gradient(at bottom, white, #6699cc)'
});
$('div2').setStyle({
boxShadow:'0px -10px 10px #808080'
});
}
</script>

旁注:我建议您学习使用浏览器的开发人员工具。所有主流浏览器都应该有它们。它可以更轻松地检测此类错误,从而增强您的学习过程。

关于javascript - 原型(prototype)库/CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32772362/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com