Question

Id='a';      
linkId   = '#dialog_link' + Id;

htmlCode = '<p><a href="#" id="' + linkId + '" class="ui-state-default ui-corner-all"><span></span>Open Window</a></p>';        
$('#WindowsContainer').append(htmlCode);

$(linkId).css('padding: .4em 1em .4em 20px;text-decoration: none;position: relative;');
$(linkId + ' span.ui-icon').css('margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;');

最后两行不影响id＃“dialog_linka”的样式。

Answer 1

使用样式集从jquery创建元素。

var id = 2;
var link = $('<a/>',{
   id:'dialog_link' + id,
   class: 'ui-state-default ui-corner-all',
   text: 'Open Window',
   css:{
     padding: '.4em 1em .4em 20px',
     'text-decoration': 'none',
     position: 'relative'
   }
})

<强>演示 Jsfiddle

<强>参考 - Creating element from jquery

Answer 2

您需要将css参数作为属性 - 值对的映射传递 -

$(linkId).css({'padding': '.4em 1em .4em 20px','text-decoration': 'none;position: relative'});

请参阅此处的文档 - http://api.jquery.com/css/

Answer 3

试试这个：

$(linkId).css({ 
    padding: ".4em 1em .4em 20px",
    "text-decoration": "none",
    position: "relative"
});

您可能需要重新阅读the API并检查$.css()接受的值类型。

编辑：如果它不起作用，那是因为你没有正确创建HTML：

htmlCode = '<p><a href="#" id="' + linkId + '" ...'

因为linkId是"#dialog_linka"，id属性是id="#dialog_linka"，当它应该是dialog_linka时（没有哈希）。

此外，您没有任何类.ui-icon的元素，至少在示例代码中。

请参阅http://jsfiddle.net/YDYA6/了解演示。

Answer 4

您使用css功能错误。

应该是：

$(linkId).css({
    'padding': '.4em 1em .4em 20px',
    'text-decoration': 'none',
    'position': 'relative'
});

Answer 5

试试这个。你可以添加样式属性而不是使用.css函数。

Id='a';      
linkId   = 'dialog_link' + Id;

htmlCode = '<p><a href="#" id="' + linkId + '" class="ui-state-default ui-corner-all"><span class="ui-icon"></span>Open Window</a></p>';        
$('#WindowsContainer').append(htmlCode);

$("#"+linkId).attr("style",'padding: .4em 1em .4em 20px;text-decoration: none;position: relative;');
$(linkId + ' span.ui-icon').attr("style",'margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;');

动态地将元素附加到div并设置css样式

5 个答案: