如何创建一个改变html属性的点击功能？

问题描述：

我正在使用Jquery进行点击事件。当我改变css属性时，它很简单，但我想要改变（画布）HTML中的大小的一个元素。如何创建一个改变html属性的点击功能？

我试图访问和更改在点击这个网站码 - 宽度和高度：

<canvas id="testCanvas" width="755" height="500" > </canvas>

与这个jQuery

$('#flipthehood').click(function(){ 
    console.log('hood flipped clicked'); 
    $getElementById('testCanvas').animate({width="200"}, 250); 
})

这是去了解它的最佳方式？如果是这样，我可以请一些建议的语法，使其工作？我得到的意外错误=签署

非常感谢

'{width =“200”}'不是有效的JS对象，你想'{width：“200”}' – jdphenix

另外，'$ getElementById（'testCanvas'）''必须是'$（'＃testCanvas '）' –

使用'.css（{}）'方法。 –

答

使用jQuery的ID选择提取元素，

document.getElementById('testCanvas')相当于$('#testCanvas')

和.animate()正确的语法是这样的：

$('#testCanvas').animate({width:"200"}, 250);

谢谢你的伴侣 –

答

要使用jQuery更改元素属性，请使用.attr（）方法d：

$("#testCanvas).attr("width", 200)

答

确保当文档准备好你的点击事件。另外document.getElementById不在JQuery中使用。这工作：

$(document).ready(function() { 
    $('#flipthehood').click(function(){ 
     console.log('hood flipped clicked'); 
     $('#testCanvas').attr("width", "200"); 
    }); 
});

如果你希望它是一个平滑的动画简单地将它改成这样：

$(document).ready(function() { 
    $('#flipthehood').click(function(){ 
     console.log('hood flipped clicked'); 
     $('#testCanvas').animate({width: "200"}, 250); 
    }); 
});

$ .animate使用冒号，而不是等号。

如何创建一个改变html属性的点击功能？

相关推荐