如何设置由javascript动态创建的元素的样式

Question

我是前端开发的新手。我试图编写注释工具。示例屏幕显示在下图中。用户选择一个句子后，右侧栏上的注释框与突出显示的句子位于同一水平位置。

我想编辑新创建的html元素的样式，但我该怎么做？

这是我的html结构：

  <section id="main">
        <div class="row">
            <div class="small-8 large-8 columns"id="rawdata">

                <p> <span class="sentence">2:22 So, last time I was here, I don't know if I told you this, but, um, we kind of did a "I like, I wish" activity on paper, about things that you like about studio, and things that you wish would change.</span><span class="sentence"> Um, do you want to share any of those thoughts now, so maybe we can talk about them? [name], I have yours if you want to look at it again.</span></p>
                <p><span class="sentence">2:47 I forgot to add something.</span></p>
                <p><span class="sentence">2:54 Well, I don't know, in terms of what I dislike about studio.</span></p>
                <p><span class="sentence">2:57 So, some people wrote in theirs that, um, they dislike how cluttered it gets.</span></p>

                <p><span class="sentence">5:09 I don't get bothered.</span>< <span class="sentence">I like the draftiness, I'm a little...</span><span class="sentence"> I'm one of the ones that opens the windows, and like—</span></p>
            </div>
            <div class="small-4 large-4 columns" id="annotations"><p></p>
            </div>
        </div>
    </section>

用于选择句子和添加注释的JS：

 <script>
    $('.sentence').click(function() {
        $(this).toggleClass('sentenceStyle');
        var y = $(this).offset().top;
        y = parseInt(y) + 'px';

        var para = document.createElement("p");
        $("#annotations").append(para);
        para.innerHTML="this is an annotation";
        para.css('color','yellow');
    });
</script>

这就是小提琴：http://jsfiddle.net/yujuns/HDe6v/3/

Answer 1

你在jQuery和本机脚本之间进行了一些混合。

css()是一个jQuery方法，但para是一个DOM元素。

学习使用浏览器控制台/开发人员工具查找错误。你应该看到一个para.css()。

我建议使用所有natve脚本方法或使用所有jQuery方法进行DOM操作，尽量不要混用它们。

使用jQuery，你可以使用：

创建相同的p

var para = $('<p>').text("this is an annotation").css('color','yellow');

使用代码更改从para创建jQuery对象所需的样式，以便能够使用css()

$(para).css('color','yellow');

或者，您也可以使用本机属性直接在DOM元素本身上更改样式

Answer 2

您可以在jquery中使用css函数来执行此操作...

$(para).css({
   'color':'yellow',
   'font-size':'20px'
});

这些css属性嵌套在style属性的元素中。

Answer 3

因为para不是jquery对象所以它给出了错误，

你可以使用多个替代，

var para = $('<p>').text("this is an annotation").css('color','yellow');

var paraHTMLObject= para.get(0)

或

 var para = document.createElement("p");


$("#annotations").append(para);



 para.innerHTML="this is an annotation";



para.style="color:yellow"