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

我不熟悉前端开发。我试图编写一个注释工具。下图显示了一个示例屏幕。用户选择句子后，将在右侧栏上与高亮显示的句子处于同一水平位置的位置添加注释框

我想编辑新创建的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>

2:22所以，上次我在这里，我不知道我是否告诉过你们，但是，嗯，我们在纸上做了一个“我喜欢，我希望”的活动，关于你们喜欢的关于工作室的事情，以及你们希望改变的事情。嗯，你现在想分享一下这些想法吗，也许我们可以谈谈？[姓名]，如果你想再看一遍，我有你的

2:47我忘了加些东西

我不知道，我不喜欢这个工作室的什么地方

2:57所以，有些人在他们的信中写道，嗯，他们不喜欢它变得多么杂乱

5:09我不介意。<我喜欢通风，我有点。。。我是打开窗户的人之一，就像-

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>

$（'.句子'）。单击（函数（）{
$（this.toggleClass（'sentenceStyle'）；
变量y=$（this）.offset（）.top；
y=parseInt（y）+‘px’；
var para=document.createElement（“p”）；
$（“#注释”）。附加（第2段）；
para.innerHTML=“这是一个注释”；
css段（“颜色”、“黄色”）；
});

---

这就是问题所在：

您在jQuery和本机脚本之间的切换有点混乱

css（）

是一个jQuery方法，但是

para

是一个DOM元素

学习使用浏览器控制台/开发人员工具查找错误。您应该看到

para.css（）

中的一个

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

使用jQuery，您可以使用以下方法创建相同的

p

：

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

---

或者，您可以使用本机属性直接在DOM元素本身上更改样式，也可以使用jquery中的css函数来执行此操作

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

---

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

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

您可以使用多个备选方案

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

var paraHTMLObject= para.get(0)

---

好的，我明白了。非常感谢。

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"