Define hover attributes with DOM elements - javascript

I'm working on a Chrome extension which displays a dynamically loaded popup. User can change settings to choose its color. My issue is that I would like to change some :hover attributes of popup's elements, but I don't find how.
My current code:
var myDiv = document.createElement('a');
myDiv.style.background = myIcon;
myDiv.style.backgroundImage = myURL;
What I would like to add (not working code atm):
myDiv.hover.style.backgroundColor = myColor;
Thank for help.

You can't set styles for pseudoclasses with JavaScript. Instead, you must define them with CSS. You can use JavaScript to dynamically add CSS to a page, though:
var style = document.createElement("style");
style.appendChild(
document.createTextNode("some-selector:hover { /*...*/ }")
);
document.querySelector("head").appendChild(style);
...or similar.
Here's an example adding an element with class foo to a document, along with dynamically-defined styles for it:
var foo = document.createElement("div");
foo.className = "foo";
foo.innerHTML = "This is foo, hover me";
document.body.appendChild(foo);
var style = document.createElement("style");
// Pick a color at random
var color = ["red", "blue", "green"][Math.floor(Math.random() * 3)];
style.appendChild(
document.createTextNode(
".foo:hover { background-color: " + color + " }")
);
document.querySelector("head").appendChild(style);

Related

Change color of specific part of element string in JavaScript

I'm creating a chat application, and I want the users text's to be colored. Here is how I create the text element:
var item = document.createElement('li');
item.textContent = `[Anye]: hello`;
item.style.fontWeight = 'bold';
item.style.color = 'red';
This is how this code is executed:
This, on the other hand, is what I would want:
Is there a way that I can change the color of only part of the text?
Note: The desired image was created using the console, and please keep in mind that the messages are not fixed, it's up to the user what they want to say.
I'm willing to use jQuery for this example, if needed.
Thanks!
You can wrap the author in a span element and set style property.
var item = document.createElement('li');
item.style.fontWeight = 'bold';
const author = document.createElement("span");
author.innerText = "[Anye]: ";
author.style.color = 'red';
item.append(author);
item.innerHTML += "hello";
document.body.append(item);
Or you can wrap the message in a span element and set a predefined style in CSS.
var item = document.createElement('li');
item.innerHTML = `[Anye]: <span>hello</span>`;
item.style.fontWeight = 'bold';
item.style.color = 'red';
document.body.append(item);
li span {
color: initial;
}

How to add a style attribute to an element if it doesn't exist or just add the given styles to the pre-existing style attribute using Javascript?

I want to make a script such that it adds an attribute style to an element with the given styles if it doesn't exist or just simply add the given styles to the pre-existing style attribute. Here is a piece of the code I wrote :
var style = function(sel, styl) {
var rVselect = document.querySelector(sel);
rVselect.getAttributeNode("style").value += styl;
};
This works perfect but has a problem. This only works when there is a style attribute ( doesn't matter empty or have some content ) given to the element. I want it make a style attribute in absense of it and then insert the styles and in work as it is working now in presense of the style attribute i.e. just simply add the new styles to the pre-existing style attribute.
Thanks in advance !
Its very simple. Here is a piece of code :
var style = function(sel, styl) {
var rVselect = document.querySelector(sel);
rVselect.style += styl;
};
If you want to add this to all matching elements go for this :
var style = function(sel, styl) {
var rVselect = document.querySelectorAll(sel);
for( var i = 0; i < rVselect.length; ++i ) {
rVselect[i].style += styl;
};
};
function(sel, styl) {
var rVselect = document.querySelector(sel);
rVselect.style = rVselect.style + styl;
};
It takes existed styles and add styles passed to argument

How to select a particular element in DOM and not its parent element using js

I am trying to create a chrome extension, which can be used to inspect elements on any webpage. It should have two functionalities -
On clicking, it should return the html markup and css styles of
that particular element.
On hover, it should highlight the particular element (just like
inspector in chrome dev tools)
I have achieved first part, but i am not able to achieve the second part.
I am new to JS and trying to achieve the hover task using plain JS, without any jQuery.
This is my content script file
console.log("Chrome extension loaded");
var all = document.body.getElementsByTagName('*');
var divs = document.body.getElementsByTagName('*');
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.h:hover { background-color: #83aff7; }';
document.getElementsByTagName('head')[0].appendChild(style);
// for click events and functionality
for (var i = 0, max = all.length; i < max; i++)
{
all[i].addEventListener("click",function() {
console.log(this);
console.log(window.getComputedStyle(this));
});
}
// for hover event
for (var i = 0, ma=divs.length; i <ma; i++)
{
(divs[i]).addEventListener('mouseover', function(){
this.classList.add('h');
});
if(this.parentNode && this.parentNode.hasAttribute("class"))
{
divs[i].addEventListener('mouseover', function(){
this.parentNode.classList.removeClass('h');
});
}
The clicking events part is working fine but in hover event, the color of parent as well as the element changes. Only the color of particular hovered element should change.
Thanks in advance!
You can use "addEventListener" to achieve "mouseover" to the element
You need to edit your css style
style.innerHTML = '.h:hover { background-color: #83aff7; }';
This says if an element with class h is being hovered, set background color. You are adding the "h" class to the parent with
$(this).parent().addClass('h');
CSS RULE 1 (if parent is of class h AND parent is hovered, color background):
style.innerHTML = '.h:hover *{ background-color: #83aff7; }';
CSS RULE 2 (if parent is of class h AND element is hovered):
style.innerHTML = '.h *:hover{ background-color: #83aff7; }';
Make sure to pick the rule that is appropriate for you.
Working JS Fiddle with both examples (your original CSS is the third box): https://jsfiddle.net/nsevpqd9/
If you do not want to edit your CSS style at all then add the class to the element itself, not the parent:
$(this).addClass('h');

How to change color with new tag in javascript?

In my HTML file I have to change color with new tag.It will be changed permanently.If it's possible to do.Now I am using below code:
function alertSelection()
{
var range = window.getSelection().getRangeAt(0),
content = range.extractContents(),
span = document.createElement('b');
span.appendChild(content);
var htmlContent = span.innerHTML;
range.insertNode(span);
}
when i press refresh i will be get old one.how to create tag when selecting.
Whenever you want to change some style through then use style
element.style.css attribue = value
Example: span.style.color = "green";

JS Trying to give a select effect to a tag

I'm trying to apply a 'select like' effect with JS, my function is triggered
on onClick event and it change the tag style, but the tag style remains unchanged after selected a new tag, the main idea of the first block of code is reset to the default style the old selections, but doesn't work..
function selectEffect(tag){
//Code to reset to the default style first if something is selected
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = '../static/css/style.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
//Code to apply a selected like style
var element = document.getElementById(tag);
element.style.backgroundColor='#7D9ABE';
element.style.color='#ffffff';
element.style.fontWeight='bold';
}
What's wrong with it?, Any help is appreciated..
Thanks.
You need to save the default style of the element first so you can reset it afterwards. To reset the original element you either keep track of it or you can simply default all elements.
With the advice of Stokedout, I did the trick:
var selectedTag;
function selectEffect(tag){
if (selectedTag){
var oldElement = document.getElementById(old_selectedRow);
oldElement.style.backgroundColor=old_backgroundColor;
oldElement.style.color=old_color;
oldElement.style.fontWeight=old_fontWeight;
}
var element = document.getElementById(tag);
element.style.backgroundColor='#7D9ABE';
element.style.color='#ffffff';
element.style.fontWeight='bold';
}
function doit(tag){
selectEffect(tag)
selectedTag = tag;
}
<a onclick="doit('id1');"></a>
seems lazy code but it worked!

Categories