I am new to front-end development. I was trying to code an annotation tool. A sample screen is shown on the image below. After the user select a sentence, an annotation box is added on the right side bar at the same horizontal position as the highlighted sentence.
I want to edit the styles of the newly created html element, but how can I do that?
Here is my html structure:
<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 for selecting sentence and adding annotations:
<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>
And here it is the fiddle: http://jsfiddle.net/yujuns/HDe6v/3/
You are getting mixed up a bit switching between jQuery and native script.
css()
is a jQuery method, but para
is a DOM element.
Learn to use browser console/ developer tools to look for errors. You should see one for para.css()
.
I would suggest either using all natve script methods or using all jQuery methods for DOM manipulation and try not to mix them.
Using jQuery you can create the same p
using:
var para = $('<p>').text("this is an annotation").css('color','yellow');
Using the code you have to change the style you need to create a jQuery object from para
to be able to use css()
$(para).css('color','yellow');
Alternatively you could use native properties to change the style directly on the DOM element itself also
You can use the css function in jquery to do this...
$(para).css({
'color':'yellow',
'font-size':'20px'
});
These css properties, get nested within the element in the style attribute.
since para is not a jquery object so it is giving error,
you can use multiple alternates,
var para = $('<p>').text("this is an annotation").css('color','yellow');
var paraHTMLObject= para.get(0)
or
var para = document.createElement("p");
$("#annotations").append(para);
para.innerHTML="this is an annotation";
para.style="color:yellow"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.