Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
In the case where Javascript knows which elements are clickable, should Javascript be used to change the mouse cursor (by changing the css) as practically speaking the mouse cursor isn't a style property of the element in question? I am aware this is a question asking to some extend for opinions, so I am looking for an answer which covers both sides of the argument - refers to relevant expertise - and hopefully reaches a conclusion.
Just to be clear, if one would have a clickable list item for example normally one would add in Javascript
someLib.listen("#id li",func);
and in css
#id li{
cursor:pointer;
}
rather than the someLib.listen handling this. For example in my case I was changing the listener from a child element to the parent element and it just seemed to me that it does not follow the rules of separation of logic and presentation that I had to change things in two places.
I tend to use this all the time for 'javascript' created links on non anchor elements ( divs, spans et all )
.jsclick { cursor:pointer }
Then whenever we create an event handler in js we attach this class to it ( as part of the course )
_elementwithhandler.className += ' jsclick';
Not really anything else we can do on non anchor elements. Whether to set it inline or use a class , minor point ..
I'd say use a class - easier ( for others ) to tell in future by the inspect tools which elements have been modified by js
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Improve this question
Say I have a contenteditable div with text contents. Now I want to add comments (which are outside the container div) to some pieces of the text. And when the user clicks the comment, the corresponding text pieces should be styled (e.g. red color). The difficulty is that these pieces may have overlapped parts (like ab and bc in abc).
And I want the style applied based on the very characters starting and ending a sequence. So if new contents (even if the same pieces) are added before the starting character or after the ending character, the style will not be applied.
To split each overlapped part into a new element may help but seems not that clean (especially when the contents contain many nested tags). Are there some better ways?
Tags must be nested, so you should use something like splitting.js. Two problems are, with content-editable they could drag-drop anything (so id's may be lost), and the eventListener could fire multiple times (so be careful with regex). I doubt that your intent to intercept content-editable is generally enforceable. As you juggle multiple, complex, nonstandard scenarios, how does the user benefit?
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Is it better to hide an element by adding display: none; to the element using JS or is it better to add a class that has the attribute display: none;? I understand that adding a class is usually better than adding styles directly because it's easier to manage but if it's only one property is it okay to just add style directly?
This really comes down to personal preference if we're talking about adding or removing a single style.
Personally, I prefer just adding/removing classes even for simple stuff like showing/hiding elements. The problem with inline styles is if you ever want to apply classes to the same element, the inline style will get precedence, which can cause some confusion and you're wondering why your newly added class's properties aren't applying.
The other benefit to applying classes for styling is you can easily add or remove properties in one place (the CSS) and you never have to update your Javascript (unless you make a new class and want to add/remove that also).
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This seems to be impossible with the typical "inspect element" approach, which seems great for HTML and CSS, but that's it. I can't go to a particular element and then link to the particular JavaScript that's controlling it. Is there any way to do this?
As someone else said, there is no precise notion of "the JS controlling an element". There is JS which does something to an element, and there is JS which handles an event on a element. To handle these cases:
In Chrome devtools, select the element, right-click, and select Break on.... This will break when something happens to the element, such as a change in its children or its attributes, and leave you on the line that was making the modification.
Use "Event Listener Breakpoints" and choose to break on a particular event. Then initiate that event on an element which is listening for it, such as by clicking on the element. The debugger will take you to the line handling that event (which might be deep within jQuery, but that's another story).
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm somewhat experienced in markup & styling, but I am a relative newcomer to front-end scripting.
Can someone please clarify which is better (or best) practice:
Is it better to modify HTML element display / behaviour directly via DOM or to do so by assigning and removing CSS classes?
My own take is that using javascript to append or remove CSS classes is probably the more elegant way to alter element display and / or behaviour, but I wish to confirm this before proceeding.
Can anyone comment further?
Here is a very general guideline:
Use classes to define some styles (or even just one style), if it actually means something. For instance, if you want JavaScript to designate an element as a selected item, use a .selected-item class and set that on the element. This lets you do design work in the CSS file.
However, if you are doing one-off modifications, especially those involving calculations, such as setting the height of an element relative to another element... then you should modify the element.style object with those specific properties.
In summary: Use a class if it's got meaning. Modify properties directly if it's a one-off thing.
In fact, this applies to the base HTML as well. You can easily define a class .center {text-align:center} and apply that to center-aligned elements, because it's not a one-off deal. But if you need for a particular element to have some extra bottom margin, use style="margin-bottom:20px" instead of defining a class just for that.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to make a JavaScript function that will scroll to the next article whenever the down arrow key is pressed. All my HTML elements are dynamic, and are all just article tags with no ID. The script I have so far can recognize the down key being pressed, but from this point, I have no idea how to make a function that will scroll down to the next article tag without naming the articles or something like that.
document.addEventListener('keydown', function(e){
if(e.keyCode === 40) {
// function to scroll down
}});
I think I will need to create a variable that is just any article element within my HTML page. Is that even possible? If so, how would I do that, and make the function scroll down to the next article? Thanks in advance!
You are looking for window.scrollTo function. All you need is to identify Y offset of next article. You can do it by calculating offsetTop of that node (plus all its offsetParent nodes).
Another solution: use element.scrollIntoView() or element.scorllIntoViewIfNeeded(). It's cross-browser too, but I would prefer first solution because it allows you to you can control animation and it will work even in oldest browsers.