javascript select by CSS and toggle display [closed] - javascript

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'm a javascript newbie so go easy on me. I'm wanting to select a bunch of text that is identifiable only by inline CSS (not classes or ids or anything), and create a toggle that turns it on and off. So -- find everything with backgroundColor = '#eed6b4' and toggle display='none' / 'inline-block'
Needing the javascript and html... thx
=====================
This is what I tried originally:
<script type="text/javascript">
function toggleVisibility() {
var codeNum = document.getElementsByClassName('syntaxHighlightingPlugin');
i = codeNum.length;
while(i--) {
codeNum[1].style.backgroundColor = '#eed6b4';
if(codeNum.style.display == 'inline-block')
codeNum.style.display = 'none';
else
codeNum.style.display = 'inline-block';
}
}
</script>
<button type="button" onclick="toggleVisibility();"> Hide numbers (for copying) </button>
Oh, and as I replied to a comment, the twist on this is that it's for text rendered by a TWiki plugin, so I have no control over the resulting CSS --- which, as I said, has no classes --- also, since it's rendered, I think I may need to use something like getComputedStyle (?).

It's generally bad practice to use inline css, and to make your Javascript dependant on that inline CSS is also not a good idea. However, if you wanted to select an element based on the value of an attribute, you can use the attribute value selector like this:
$("[style='backgroundColor *= #eed6b4']").hide();
Reminder: This uses jQuery.

You could set a class to that background color and then filter by class name $(".classname").
OR
You could add a new selector like explained here:
Is there a style selector in jQuery?
Not necessarily a great idea, but you could add a new Sizzle selector for it:
$.expr[':'].width = function(elem, pos, match) {
return $(elem).width() == parseInt(match[3]);
}
which you could then use like so:
$('div:width(970)')
//That's going to be horrifically slow, though, so you'd want to narrow down on the number >of elements you're comparing with something like :
$('#navbar>div:width(970)')
//to only select those divs that are direct descendants of the navbar, which also have a >width of 970px.

Related

How do I target $0 without getElementById [closed]

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 4 years ago.
Improve this question
I am trying to find the appropriate way to edit an element but it seems like their is only one node with an ID. I have thought of
my code looks like:
var root=document.getElementById("app-mount").childNodes;;
var child = root[n].innerHTML;
But this is not reusable to get the path to any element such as $0 used in chrome dev tools. I was wondering if there was a method one could call on $0 to just give me the path so one could know how to target it as one does for an ID document.getElementById('id');
Edit:
after getting help I have updated my code to look like:
document.querySelectorAll('svg')[1].outerHTML="<img id='orb' class='orb' src='https://i.imgur.com/k3d8qMN.gif' width='50' height='60'>"
Its for a theme I am making for discord!
Thanks for the help!
I am not sure that I am following your question very well, but if I understand you correctly, you are looking for something like querySelector or querySelectorAll.
You can use CSS commands to target various HTML elements. eg:
document.querySelector('div'); //returns the first div
document.body.querySelectorAll('div'); //returns all the divs attached to the body element
You can also target ids:
document.querySelector('#app-mount');
or classes:
document.querySelector('.blue');
and query selectors may also be used:
document.querySelector('#app-mount > ul > li:nth-child(3)');

get multiple Elements By Tag Name in JavaScript? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hello there am trying to make an image gallery for example lets say that I have multiple images and I want to change their opacity when I hover over them by using JavaScript I know that this is possible with CSS but am trying to accomplish this with JavaScript I tried using get Elements By Tag Name method but the problem it just can access one element by time so can I do that thanks
Try this:
var elements = document.getElementsByTagName("img");
Array.prototype.forEach.call(elements, function (e) {
// Here you can access each image individually as 'e'.
});
When you hover, get the ID of that image. Then loop through all images (example above) and set their opacity. If the element is equal to the one you clicked on (remember, you just took the ID so you can use it), just skip to the next one using continue;.
you have to collect you image elements like
var images = document.getElementsByTagName("img");
then you have to do like
Array.prototype.forEach.call(images, e => e.addEventListener("mouseover", function( event ) { do something}));

Does anyone know which script would cause placeholder text to be removed from text inputs and put into spans? [closed]

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 have a page that I added to a project that was already underway, and when I added the masterpage, it was given a whole bunch of scripts. Among these scripts is something that is messing with the styles on my page.
There are several different bugs, but the two biggest things are
It moves my placeholder text into external spans, and these spans are all positioned wrong.
It is adding a keypress function to my searchbar that goes to the wrong place.
The thing is, it looks like I have about 20 scripts on the page thanks to the masterpage, so I don't know where to even start putting breakpoints.
Is there any simple way I can find out which scripts are responsible for doing these weird things? Does anyone know of a specific script that would cause that placeholder text issue?
If you haven't tried out the break on dom attribute modification in chrome dev tools or don't have chrome installed. or it might be an IE specific Then you could do it with plain javascript by monkey patching the setter method with object.defineProperty
If it is using setAttribute("placeholder", "") or removeAttribute("placeholder") try monkey patching that one instead.
here is an example:
// select the target node
var target = document.querySelector('input');
// change the setter method
Object.defineProperty(target, 'placeholder', {
set: function(newValue) {
// log the code that made the change
throw (new Error()).stack;
}
});
function updateDom() {
changeInput();
}
function changeInput() {
target.placeholder = ""
}
setTimeout(updateDom, 100);
<input id="input" type="text" placeholder="foo">
if that doesn't help cuz it's a deep minified jQuery hook that doesn't trace back to your code, than you only choice is to "cut and trace"

Get ID of element and display on the page [closed]

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 8 years ago.
Improve this question
I am not advanced in the Javascript realm, and can't figure out how to write the code to do this.
Basically, I'll use a URL parameter to run this function (&testing) - but I'd like to take the ID of an input field and display it next to that input. I frequently use these ID's for CSS etc, and it would be great to have them auto-display next to a field rather than having to inspect every element individually.
Any help?
It's a little trickier than it sounds. If you don't want to mess with the IDs, you'll have to
document.getElementsByTagName("input");
Which creates a NodeList of the input elements. Then, loop through with a simple for loop, or go fancy with a prototype call.
Array.prototype.forEach.call(document.getElementsByTagName("input"), function(x) {
var span = document.createElement("span");
span.textContent = x.id;
x.parentNode.appendChild(x);
});
This is a fancy script that creates a span, and assigns the text to the id of the element it's iterating over. It then appends said span after the input by grabbing the parent and appendChilding it.
This assumes your inputs do not share the same parent, so you may have to adjust for your HTML structure, but the key is to iterate, assign text, and append the new element.
var inputs = document.getElementsByTagName('input');
for(var i =0; i<inputs.length; i++){
inputs[i].title = inputs[i].id;
}
Finds all the html input elements on a page, and adds a tooltip with its id value on mouse over.
Dev tools can do this for you though without causing as much fuss!

CSS version of target attribute [closed]

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 9 years ago.
Improve this question
Is there a css-version of the target attribute like , instead of writing
Link
i could have wrote :
<style type="text/css">
a { target:something; }
</style>
No, there isn't.
Firstly, target is an HTML attribute, not a CSS style property. CSS cannot modify or create a new attribute. You can, however, style all a elements that have target attributes with the selector:
a[target] {
...
}
You can't for the moment, but there was a working draft by the W3C called CSS3 Hyperlink Presentation Module, now abandoned. It defines a CSS property named target which is meant to substitute the HTML attribute, and actually is way more specific and allows to do more than the old HTML target. Unfortunately, as fas as I know, no browser tried to implement it, I think that's the cause of abandonment. However, in the future could be proposed again (I hope, at least).
As others have stated - there is not a way to do this with CSS yet.
A way to do this is with jQuery+css.
If you have given all of your links a specific class, use this jQuery to set the target, and if you want to set the target for ALL links, use the second set of code:
$(document).ready(function(){
if($('a').hasClass('CLASSNAME')) {
$(this).attr("target", "TARGET");
}
}
If no class is set and you want all of the links on your page (that aren't internal links) to have a set target, use this:
$(document).ready(function(){
$('a[href^=http]:not([href^=http://YOURSITEURLWITHWWW],[href^=http://YOURSITEURLWITHOUTWWW])')
.add('a[href^=www]:not([href^=YOURSITEURLWITHWWW])')
.attr('target','_blank');
}

Categories