jQuery：克隆输入值及其风格

我试图将我的第一个div上的输入值附加到另一个div以及其CSS上。这里是我的HTML代码：jQuery：克隆输入值及其风格

<div id="d1"> 
<input type="text" id="txt-initial" style="font-family: Verdana; font-size: 48px"/> 
<input type="button" id="btn-clonetext" Value="clonetext"> 
</div> 

<div id="d2" style="border:solid 1px; height: 400px; width: 400px; margin: 10px;"> 
</div>

这里是我的JS代码：

$('#btn-clonetext').click(function(){ 
$('#d2').append($('#txt-initial').val()); 
})

如果我使用克隆，该值将被复制但这样做的文本框;如果我使用val，则该值被复制，但不是其样式。

但val（）。clone（）似乎没有工作。有什么帮助吗？谢谢！

来源

2015-08-23 Miko

为什么不把样式属性放在类中，然后应用类来输入。那么你可以使用这个类并将其应用于div，同时复制该值。 – Newinjava

嗯，你有一个点。但如果CSS在jQuery中呢？无论如何，我会尝试。谢谢！ – Miko

以下可以帮助你，但必须说这是完全没有必要的。您可以简单地提供一个类名称并通过CSS添加样式。

$('#btn-clonetext').click(function() { 
 
    var $a = $('<div/>').text($('#txt-initial').val()).attr('style',$('#txt-initial').attr('style')) 
 
    $('#d2').append($a); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id="d1"> 
 
    <input type="text" id="txt-initial" style="font-family: Verdana; font-size: 48px" /> 
 
    <input type="button" id="btn-clonetext" Value="clonetext"> 
 
</div> 
 

 
<div id="d2" style="border:solid 1px; height: 400px; width: 400px; margin: 10px;"> 
 
</div>

来源

2015-08-23 06:48:06 RRK

完美！像魔术一样工作。：）谢谢！ – Miko

代替将内联CSS你<input>有elemment ID “TXT的初始” 的使CSS类。现在将这个类添加到你的jquery函数中。

<style> 
    .txtInitialCss{ 
    font-family: Verdana; 
    font-size: 48px 
    } 
</style> 


<div id="d1"> 
<input type="text" id="txt-initial" class='txtInitialCss'/> 
<input type="button" id="btn-clonetext" Value="clonetext"> 
</div> 

<div id="d2" style="border:solid 1px; height: 400px; width: 400px; margin: 10px;"> 
</div> 

$('#btn-clonetext').click(function(){ 
$('#d2').append($('#txt-initial').val()).addClass("txtInitialCss"); 
})

来源

2015-08-23 07:11:00

jQuery：克隆输入值及其风格

回答

相关问题