Javascript 从按钮到文本输入的HTML转换

我需要一个我正在为一个学校项目工作的程序的帮助，当

type=”“

属性从

text

更改为

按钮时，我是否可以进行转换？我已经尝试过CSS
转换：all
样式，但这似乎不起作用，而且jQuery似乎也没有为此内置的函数。我的代码很有效，我只是想为样式添加一个不错的转换。谢谢

HTML



CSS:

#亚军事区{
位置：绝对位置；
保证金：自动；
宽度：60%；
身高：50%；
最高：50%；
左：50%；
边界半径：0.5雷姆；
转换：翻译（-50%，-50%）；
背景色：#0084ff；
}
#钮扣{
位置：绝对位置；
字号：32pt；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景色：#ffffff；
填充：1.5%2%；
边界：无；
边界半径：0.35雷姆；
过渡：全部；
过渡时间：150ms；
}

jQuery

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
//$（“#按钮”）.animate（{width:'80%}）；
$（“#按钮”）.attr（“类型”、“文本”）
$（“#按钮”）.attr（“值”，”）
$（“#按钮”）.attr（“占位符”，“让我们这样做吧！”）
});
});

来源：




当前预览：
您可以做什么当类型属性为文本或按钮时，为元素设置宽度，然后css转换属性可以处理动画

将此添加到您的样式中：

#button[type=button]{
  width: 150px;
}

#button[type=text]{
  width: 280px;
}

其他一切都很好
如果在类型属性为文本或按钮时为元素设置宽度，则css转换属性可以处理动画

将此添加到您的样式中：

#button[type=button]{
  width: 150px;
}

#button[type=text]{
  width: 280px;
}

其他一切都很好
定义你的
文本
类型css，因此一旦它在单击后变成
文本
类型，它将显示动画


$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
//$（“#按钮”）.animate（{width:'80%}）；
$（this.attr（“类型”、“文本”）
$（this.attr（“value”，“”）
$（this.attr（“占位符”，“让我们这样做吧！”）
});
});
body，html{
背景色：#212129！重要；
身高：100%；
宽度：100%；
}
#亚睑板{
位置：绝对位置；
保证金：自动；
宽度：60%；
身高：50%；
最高：50%；
左：50%；
边界半径：0.5雷姆；
转换：翻译（-50%，-50%）；
背景色：#0084ff；
}
#钮扣{
位置：绝对位置；
字号：32pt；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景色：#ffffff；
填充：1.5%2%；
边界：无；
边界半径：0.35雷姆；
/*过渡：全部；
过渡时间：150ms*/
}
输入[类型=文本]{
宽度：200px；
过渡：宽度1s，方便进出！重要；
}

沃尔夫拉姆德尔塔
定义您的
文本
类型css，因此一旦单击后它变成
文本
类型，它将显示动画


$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
//$（“#按钮”）.animate（{width:'80%}）；
$（this.attr（“类型”、“文本”）
$（this.attr（“value”，“”）
$（this.attr（“占位符”，“让我们这样做吧！”）
});
});
body，html{
背景色：#212129！重要；
身高：100%；
宽度：100%；
}
#亚睑板{
位置：绝对位置；
保证金：自动；
宽度：60%；
身高：50%；
最高：50%；
左：50%；
边界半径：0.5雷姆；
转换：翻译（-50%，-50%）；
背景色：#0084ff；
}
#钮扣{
位置：绝对位置；
字号：32pt；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景色：#ffffff；
填充：1.5%2%；
边界：无；
边界半径：0.35雷姆；
/*过渡：全部；
过渡时间：150ms*/
}
输入[类型=文本]{
宽度：200px；
过渡：宽度1s，方便进出！重要；
}

沃尔夫拉姆德尔塔
“想要为样式添加一个漂亮的过渡。”-您到底想要什么过渡？“想要为样式添加一个漂亮的过渡。”-您到底想要什么过渡？感谢您快速而有用的回复！这正是我要找的。很高兴我能帮上忙。谢谢你的快速而有帮助的回复！这正是我要找的。很高兴我能帮上忙