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 7 months ago.
Improve this question
I have a Vue TreeSelect component in my nuxt application.
The problem is that I want to customize the folding icons in the Treeselect component:
How can I do this ? I tried to modify the css classes, to replace the svg dom child by a custom created with javascript, but I have the impression that this is not the right way to do it...
Edit:
here is the dom structure for the first icon :
As you can see, I can't just change the css class. I need to change the entire svg node.
To solve my problem partially, I needed to replace the <svg></svg> node by a <span></span> node :
// Creation of the new span node
const plusIcon = document.createElement("span");
plusIcon.setAttribute("class", "vue-treeselect__option-arrow");
After that, I needed to retrieve all the differents nodes having the class vue-treeselect__option-arrow :
const treeOptions = treeMenu.getElementsByClassName("vue-treeselect__option-arrow--rotated");
// Replace all the svg elements by span elements
Array.from(treeOptions).forEach((treeOption) => {
if (!treeOption.getAttribute("class").includes("--rotate")) {
treeOptions.parentElement.replaceChild(
plusIcon.cloneNode(true), treeOptions
);
}
});
And in the css part, I have replaced the vue-treeselect__option-arrow class :
.vue-treeselect__option-arrow {
content: url(path/to/my/svg);
}
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 2 years ago.
Improve this question
For example, I have a css class in style sheet named 'track-your-order' now on some event trigger I have to update whatever in 'track-your-order' is and apply that updated class in same div. I am not meant to toggle it but I meant to update or change or replace the same css class with new values that a user will gives it to that div.
You can use the state update and a ternary operator.
className={isEventTriggered? "updated-track-your-order": "track-your-order"}
i think you can use StyledWrapper from npm styled-components module.
so if you want to make 'track-your-order' become dynamic, you can simply create state that contain a new value of your css.
then put this inside your render:
const StyledWrapper = styled.div`
${this.state.newStyles}
`;
dont forget to wrap your affected element with <StyledWrapper></StyledWrapper> or just wrap all of your elements inside render. for more documentation: https://github.com/styled-components/styled-components
edit: also dont forget to include the name of your css class inside the state. your state more or less should be look like this .track-your-order:{display:block}
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)');
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}));
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 7 years ago.
Improve this question
I have added a new element dynamically through jQuery like this:
var elem = $('#unique').append($('<span>').attr('data-rollNo', i));
Now I need to use this element after this to add something to it. Is there a way I can store a reference to this element here, so I done need to search the entire DOM every time I edit this?
Use appendTo method instead of append:
var $span = $('<span>').attr('data-rollNo', i).appendTo('#unique');
Now, span is appended and you also have a reference to this new object.
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');
}