Javascript .attr（）未按预期工作_Javascript_Jquery_Html

Javascript .attr（）未按预期工作

javascript jquery html

Javascript .attr（）未按预期工作,javascript,jquery,html,Javascript,Jquery,Html,我希望用户只需单击一个简单的按钮即可更改div的文本颜色、宽度、高度等。我无法让它在div上工作但是，如果我将完全相同的代码放在图像上而不是div，它就可以工作下面是我正在使用的小演示： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="h

我希望用户只需单击一个简单的按钮即可更改

div

的文本颜色、宽度、高度等。我无法让它在

div

上工作

但是，如果我将完全相同的代码放在图像上而不是

div

，它就可以工作

下面是我正在使用的小演示：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <button id="mainButton">Click me</button>
        <div id="dummyText">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 
            Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, 
            ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, 
            aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum 
            felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend 
            tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, 
            feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies 
            nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
        </div>
        <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded">
        <script>
            $(document).ready(function() {
                $("#mainButton").on('click' ,function(){
                    $('div').attr('width','500');
                    $('img').attr('width', '500');
                });
            });
        </script>
    </body>
    </html>


点击我
Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。
在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis，
ultricies nec、Pelletsque eu、pretium quis、sem。这是一个很好的例子。Donec pede justo，fringilla vel，
aliquet nec、vulputate eget、arcu。在埃尼姆·胡斯托、朗卡斯·乌特、伊佩拉、维尼那提斯·维塔、胡斯托。无主语
猫科动物欧洲佩德莫利斯pretium。整数tincidunt。克拉斯·达皮布斯。万岁。埃尼安秃鹫
泰勒斯。埃尼安·利古拉、波特提托·欧盟、康塞卡特·维泰、埃利芬德·ac、埃尼姆。Aliquam lorem ante，dapibus in，viverra quis，
封建的，泰勒斯。长生不老不老。奎斯克·鲁特罗姆。埃涅亚饮食。乌特里西斯酒店
尼西·维尔·奥古斯。乌兰科乌尔里西斯库拉比图尔酒店。南乙对。
$（文档）.ready（函数（）{
$（“#主按钮”）。在（'click'，function（）上{
$（'div'）.attr（'width'，'500'）；
$（'img'）.attr（'width'，'500'）；
});
});

这可能是我忽略了的东西，但我无法确定

提前感谢

您将要切换出

.attr

的

.css

 $('div').css('width','500');

 $('img').css('width', '500');

您将要切换出

.attr

的

.css

 $('div').css('width','500');

 $('img').css('width', '500');

你可以这样做

$('div').width(500);
$('img').width(500);

或：

你可以

$('div').width(500);
$('img').width(500);

或：

width

不是

的

attr

，而是CSS值。使用

$（选择器）。CSS（'CSS-property'，'new value'）

FYI，在使用

attr（）

时使用

样式，例如$（'div'）。attr（'style'，'width:500px'）
@LGSon不确定当css（）
可用时为什么要这样做。@Rorymcrossan只是想告诉OPattr（）
以属性为目标，而内联样式是style
。。。但是当然，css（）
通常是一种更好的方法width
不是
的attr，它是一个css值。使用$（选择器）。css（'css-property'，'new value'）
供参考，当使用attr（）
使用style
，例如$（'div'）.attr（'style'，'width:500px'）
@LGSon不确定当css（）
可用时为什么要这样做。@Rorymcrossan只是想告诉OPattr（）
以属性为目标，而内联样式是style
。。。当然，css（）
通常是一种更好的方法