How to Interact Javascript + jQuery with CSS

Asked

Viewed 351 times

3

I have a CSS class called .codigo. I wanted when I was going to use it, it would remove the HTML formatting (example: do that <font></font> appear as shown here in the PT OS, using the method .text()) and leave the span of the same style specified by the class. How do I interact JS, jQuery and CSS?

javascript jquery css

  • I don’t quite understand. Put your code there in the question.

  • I didn’t understand where JS and jQuery come in, it wouldn’t just be the case of styling via css?

  • No. I want to use CSS to remove HTML formatting. For example: <p> same on the site, would have HTML formatting and disappear.

  • <font> is a tag that has fallen into disuse, is only compatible until HTML4, but also not understood what the goal, has how to make an example in jsfiddle?

2 answers

5


With jQuery and CSS, you can recover HTML and set this content as text:

$('.classe').text($('.classe').html())

And then set a CSS for the font to get the correct spacing:

.classe {
    display: block;
    font-family: monospace;
    white-space: pre;
}

See the example on jsfiddle.

However, I advise against using this scheme as it may suffer an attack of XSS in case of displaying user content. Ideally you should make an escape from the HTML on the server side.

Update

Without Javascript, it would be possible to place HTML inside a <textarea> or replacing HTML special characters on the server:

Examples:

<textarea>Código   <strong>html</strong> aqui!</textarea>
<pre>Código   &lt;strong&gt;html&lt;/strong&gt; aqui!</pre>

See the jsfiddle of this example.

One way to replace characters using php is with the function htmlentities.

Note that the textarea is also vulnerable to Cross Site Scripting, for example if a user can write a value like the one shown below:

</textarea><script>....</script><textarea>
  • 1

    Now I understand what he wanted!

  • This also works if, for example, I want to put a blue background?

  • @Lucashenrique Add the attribute background-color: #AAAAFF in CSS. Of course, adjust the color for your need.

  • And utluiz, is there any way to do this without JS? Seriously, I’m really not a fan of JS, although everyone uses it in all things.

  • @Lucashenrique I updated the answer with the textarea and options pre.

  • The pre is the one I didn’t want to use (&lt; and that sort of thing), but the text area is a good idea!

  • @Lucashenrique Note that if displaying user data in textarea without due escape, someone can inject a script into your page like this: </textarea><script>....</script><textarea>.

Show 2 more comments

1

If you are wanting to add your formatting to a specific tag in your HTML, it would be something like this:

$(document).ready(function () {
    $('font').addClass('codigo');
});

This will add your code class in all tags font after loading.

But you can get the same result by modifying your CSS this way:

.codigo, font {
    /* meu estilo */
}

In the case the comma indicates that the same rules apply to the class .codigo will apply to all elements <font> of your page.

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.