CODEWITHSUNDEEP
javascripthtmlcss
Vincent Chua
Vincent Chua

Reputation: 1009

Inline JavaScript with CSS

I want to skew a list tag using inline JavaScript.

Here is the li tag and method to which it calls:

<li onPageload=
             "myFunction( element.style.webkitTransform = "skew(-25deg)"; ">
</li>

However, it doesn't work. Where did I do wrong?

Upvotes: 0

Views: 143

Answers (3)

J0e3gan
J0e3gan

Reputation: 8938

As MistressDavid points out, you can use single quotes instead of double quotes around the string you assign to element.style.webkitTransform.

As Geoffrey Hing explains, you would likely be better off to simply use CSS instead of JavaScript to achieve the same effect.

And, sure, inline JS is the root of all evil as m59 explains. :} Yes, the arguments have merit; I just think they are not the point here - same with shifting to single quotes or CSS.

No one has spelled out the main problem you had in the first place: you were terminating a double-quoted HTML attribute value with a (would-be) JavaScript double quote inside it.

In pure JavaScript, you can see the problem in the following:

alert("Hello, "world"!"); // malformed - the first double quote inside the
                          // double-quoted alert argument terminating it,
                          // the second starting a new double-quoted string
                          // altogether

Applying MistressDavid's remedy, you could solve the problem with single quotes inside the alert argument;

alert("Hello, 'world'!"); // works - but maybe not what you want

However, if you really want double quotes around world in your alert argument, you need to escape them:

alert("Hello, \"world\"!"); // works - with those must-have double quotes

Now here is the problem with the second remedy applied to an HTML attribute like you have: standard JavaScript backslash escaping does not work. Putting our alert into an HTML attribute, instead you would need...

<a href="javascript:alert(&quot;Hello, \&quot;world\&quot;!&quot;);">Whatever</a>
                          ^^^^^^       ^^^^^^^     ^^^^^^^ ^^^^^^

...wherein the double quotes are HTML encoded and the ones inside the alert argument are further backslash escaped as JavaScript requires.

I say all this because important in my mind is what you should learn from the issue as much as how you should work around it - that certain characters in strings in different programming languages need to be escaped.

Escaping in strings is such a pervasive potential issue that you should learn as much from this snag I think. It will serve you well in JavaScript, C#, T-SQL, or just about any other language.

Now, having said all that, please take your pick of more elegant ways to achieve the effect you seek. :)

Upvotes: 3

m59
m59

Reputation: 43745

Inline js has never been a good practice. Read some of these results: https://www.google.com/search?q=Why+is+inline+js+bad%3F

Inline js harms readability, separation of concerns, maintainability, has unexpected results and as you can see here, is odd to write.

Below is a clean solution to adding the style with js. My comments in the code explain what is going on.

Sample markup:

<ul>
  <!-- the class here is just for the example - something to select the elements by -->
  <li class="skew-this"></li>
  <li class="skew-this"></li>
</ul>

CSS:

/* this class will be added to the elements so this style is applied */
.skewed {
  -webkit-transform: skew(-25deg);    
  transform: skew(-25deg);
}

JavaScript:

//this is the proper way to fire a function on page load
window.addEventListener('load', function() {
  //get element references
  var lis = document.getElementsByClassName('skew-this');
  //loop through the selected elements
  for (var i=0; i<lis.length; ++i) {
    var li = lis[i];
    //add "skewed" to the element's className - now it is styled!
    li.className = li.className+' skewed';
  }
});

Live demo (click).

To answer your question more directly (I do not recommend this approach!):

<!-- call "loadFunc" on page load -->
<body onload="loadFunc()">
  <ul>
    <!-- "skew" is the name of the function that will be called for this element on page load -->
    <li load="skew"></li>
    <li load="skew"></li>
  </ul>
</body>

JavaScript:

//this is called when the page is loaded
function loadFunc() {
 //get element references that have "load" attribute
 var lis = document.querySelectorAll('li[load]');
  //loop through elements
  for (var i=0; i<lis.length; ++i) {
    var li = lis[i];
    //get the "load" function name ("skew" in this example)
    var func = li.getAttribute('load');
    //call the function, passing in the element
    window[func](li);
  }
}

function skew(elem) {
    //skew the element
    var val = 'skew(-25deg)';
    elem.style['-webkit-transform'] = val;
    elem.style.transform = val; 
}

Live Demo (click).

Upvotes: 5

Geoffrey Hing
Geoffrey Hing

Reputation: 1765

Why not just use CSS? For this particular use case, it seems much clearer and will achieve the same result.

<li class="bra" style="-webkit-transform: skew(-25deg); transform: skew(-25deg);"></li>

Upvotes: 0

Related Questions