Inline style not applied

JavaScript
1

Go to this fiddle…click the edit button and then the minus sign…you will see that the save button appears with a red thick border around it.

Click now the add icon…and go to line 28…there you will see that I am trying to remove that red border but it is not having any effect…why?

2

You set the color to none but that isn’t a valid color so nothing happens.

You should set the border-style to none and then no border will appear.

$('#saveserv').css('border-style','none');

However, I would suggest that you first style the buttons in some way because once you change a property like border then the default (browsers style) appearance of the button can’t be re-instated.

If you don’t want to change the default button appearance then maybe use outline instead of border although you will need to add a little margin as outline does not take part in the flow.

3

Hi there designtrooper,

use these modifications…

Remove line #28

   $('#saveserv').css('border','2px solid none');

Change line #121 from…

   $('#saveserv').removeClass('hideb').css('border','5px solid red');

…to this…

   $('#saveserv').removeClass('hideb');

You will then end up with a basic browser styled button. :winky:

coothead

2 Likes
4

Good point :slight_smile:

I should have mentioned that even when using js you should most often still leave the styling to CSS and not mix the two. Just add and remove a class and do the styling from CSS.

2 Likes
5

unfortunately, the creators of “jQuery” don’t appear
to understand how important it is to code in this way . :unhappy:

coothead

2 Likes
6

thx…I followed your advice.

7

 
 
        No problem, you’re very welcome. :winky:
 
 
        coothead

8

Not sure why the blame is being laid at jQuery’s feet here… adding styles directly to DOM elements is part of the HTML spec, no? :wink:

9

Kinda, sorta.
https://www.w3.org/TR/html401/present/styles.html#h-14.2.2

To specify style information for more than one element, authors should use the STYLE element. For optimal flexibility, authors should define styles in external style sheets.

10

I wouldn’t start arguing that way though, for it’s also valid HTML to write code as:

<div style="position: absolute; right: 0; margin: 20px;" onClick="'insert all javascript code here'"></div>
11

Don’t misunderstand me - I’m not advocating anything - merely pointing out that jQuery just provides an API to manipulate the underlying DOM. If you use it to do things that are considered bad practice, that’s on you.

1 Like
12

I presume that you are just playing the ‘Devil’s Advocate’ here. :winky:

But in 99.999% of instances it is very poor coding and really
should be avoided like the plague. :eyebrows:

This…

 $('#saveserv').css('border','2px solid none');

…and this…

 $('#saveserv').removeClass('hideb').css('border','5px solid red');

…both apply…

style="2px solid none"

…and…

style="5px solid red"

…to an element with id=“saveserv”

As @PaulOB pointed out in post #4…

Unfortunately, the creators of “jQuery” don’t appear
to understand how important it is to code in this way . :unhappy:

Further reading:-

  1. Inline styles and why they are considered harmful for accessibility
  2. Is it a bad practice to use inline styling with generated code?

coothead

13

I think it depends on ones experience, workflow and context.

When I started I used inline styles and inline script (and horrible markup) and while I was learning it was good to see the fruits of my efforts. As I got better [sic] I became annoyed at how difficult and time consuming it was to change things. I then began using <style> and <script> tags. After repeating the same things in many files, I learned the advantages of external files.

I have since gotten to where I don’t need to see progress being made each small step and can write a bunch of markup being fairly confident I will be able to add CSS and eventually JavaScript without needing to scrap large portions of the HTML.

However, I think inline CSS can still have a place. 1: email. AFAIK most email clients are woefully behind browser support. 2: userscripts / browser extensions. If I’m writing JavaScript that will work with a page that is not my own, it is often easier to simply setAttribute style rathar than setAttribute class and then append a <style> to the DOM.

14

I would suggest that you avoid ‘easier’ like the plague. :winky:

It is a word used by the unscrupulous to lead the unwary astray. :shifty:

coothead

15

I’m a little bemused at how I seem to have been misunderstood. I’ll reiterate:

Regardless of whether one should or shouldn’t use inline styles, the ability to do so is baked into the HTML spec - it’s still there in the current version. To suggest that the creators of jQuery are somehow at fault for their use (or misuse) is puzzling at best.

As I said in my previous post, all jQuery is doing is providing what many consider to be a simpler and easier to use wrapper over native DOM APIs. Love it or hate it, the fact that parts of the jQuery API are being adopted by browsers says something about their utility and popularity.

16

I really wish you would stop bashing jQuery. What the heck do you know about what the creators of jQuery understand? I’d wager a sizeable bet that it’s more than you.

You can write bad code in any language, or using any library or any framework. jQuery definitely has its place in the modern JS landscape and this kind of mindless jQuery bashing is completely unconstructive.

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.