I am trying to make website and I need to get access to my style thorough Vue.
I need to access CSS with Vue because style .skill-bar is background of bar and .skill-bar-fill is green filament which is supposed to have width based on number defined in Vue:
So I mean how can I change style of this .skill-bar-fill anytime I want by just changing number in Vue?
How can I change width of .skill-bar-fill separately in every item?
HTML
<div class="w-100 skill-bar">
<div class=" skill-bar-fill"> {{ programming.item1}} %</div>
</div>
CSS
.skill-bar{
text-align: center;
color: $black;
font-size: 0.75rem;
height: 1rem;
background: $bg-light;
border-radius: 1rem;
}
.skill-bar-fill{
height: 1rem;
background: $green;
border-radius: 1rem;
}
Vue
export default {
name: 'Items',
data() {
return{
programming: {item1: 95, item2: 90, },
}
}
}
And I am trying
Keep the class skill-bar-fill and use style binding :
<div class="w-100 skill-bar">
<div class=" skill-bar-fill" :style="{width:programming.item1+'%'}"> {{ programming.item1}} %</div>
</div>
You couldn't modify a property of that class since it's not unique and each item is unique.
This answer is based on original question. Your requirement has been simplified so your solution is fine and below is probably not required
For the first instance, you could use a CSS variable for the width attribute, and programatically change the variable. For subsequence instances, this won't work by itself because they share the CSS so for those you'd need an object style syntax.
Pass a property to the first child so it knows it's the first one and it needs to set the variable
Setting CSS variable in Vue:
Add var into css class
For subsequent children use object syntax:
https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1
It's not clear to me why you the width of divs needs to reference the first uncle - what if the second skill is higher than the first? - but the above might be the answer.
Related
I am making a web page to play a game. It uses two containers (inside a component). They show 2 images but by default they are empty. I apply one style to them: img-container which set the dimentions and color the background (it must be black), but the style doesn't work, although all other styles do.
Clarifications: At start, the div uses 2 classes (img-container and flex-child, which works fine). Also, I am working with Visual Studio Code.
I already try: change class name, reboot the host (closing VS Code an using 'npm start'), using another web browser (chrome and firefox) and change property values for bigger ones. This doesn't work but insert the properties in preexisting CSS classes and call they do.
Component code:
import React, { Component } from 'react';
//Class component
class PPT extends Component {
render() {
return (
<div id = "PPT">
<h3 id="explanation">¿Cómo se juega? </h3>
<div id="container" className="flex-parent">
<div id="player_hand" className="flex-child">
<h2>Jugador</h2>
<div className="img-container"></div>
</div>
<div id="computer_hand" className="flex-child">
<h2>Computadora</h2>
<div className="img-container"></div>
</div>
</div>
</div>
)
}
}
export default PPT;
CSS style:
#PPT {
margin-top: 90px;
margin-bottom: 15px;
}
#img-container {
background-color: #262626;
width: 474px;
height: 266px;
}
You are using #img-container while you must use .img-container because it's a class. I also suggest that you remove that hyphen(-) and use an _ instead to maintain proper naming convention of classes in react and to also respect lint rule as your approach will show a warning in some editors. At the end your class name must look like img_container in jsx and like this .img_conatiner in css.
The wrong part is this section in your JSX:
className="img-container"
since you are using className you have to provide a class in your related css file for it, like below:
.img-container {
background-color: #262626;
width: 474px;
height: 266px;
}
You are selecting your element in a wrong way!
In CSS, # is an ID selector, while . is a class selector. So, to target an element with class name img-container, you should use .image-container, and not #img-container.
I am grabbing the element below like:
let box = document.querySelector('.zero');
When I go to check the backgroundColor in javascript, it shows as "" :
box.style.backgroundColor // ""
If I'm grabbing the element node, why doesn't it list the backgroundColor as #DCDCDC, like what I set it in my CSS as? I assume it's due to the multiple classes on the element but not sure why.
code:
<div class="tic-tac-box zero">
</div>
.tic-tac-box {
background-color: #DCDCDC;
border-radius: 5px;
border: 2px solid white;
}
The reason it's not logging the color is not because there are multiple classes, but because how the DOM API works, and that Javascript doesn't know what's going on with your linked CSS. If you want to log the current style of your element you'll have to use the getComputedStyle() method:
getComputedStyle(box).backgroundColor); // rgb(220, 220, 220)
tldr: "The style property only retrieves inlined CSS values while getComputedStyle style retrieves computed CSS values." Check out this article for more info. You'll notice when you set colors with that syntax, it appends inline styles too.
Is it possible in Javascript to set different element's styles at once, in such way that only one reflow is triggered? For example, is it possible to set at once the color style for different elements as in the below code snippet, in a way that just one reflow is triggered instead of three reflows?
document.getElementById("elem1").style.color = '#000';
document.getElementById("elem2").style.color = '#fff';
document.getElementById("elem3").style.color = '#abc';
I am familiar with techniques (as explained here) that minimize reflows/repaints such as using document fragments or using css classes instead of manipulating css styles through javascript, but I don't see how they can be applied on this case.
EDIT: the three elements on the example are siblings but there might exist, or not, other sibling elements between them, meaning that we cannot assume that they are defined necessarily by that order in the html structure. For example, its possible that we have a structure like this:
<div id="parent">
<div id="elem1">elem1</div>
<div id="elem2">elem2</div>
<div id="elem4">elem4</div>
<div id="elem3">elem3</div>
</div>
Much appreciated for any help!
Cheers
As far as I am aware the is no way to set the class of multiple elements at once. However, the browser may actually batch these changes for you anyway. Providing you don't read styles as well as writing them I believe this should hold true.
This article provides some insight into how reflow and repaint are triggered http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
You can prepare class like this :
.color1{
color : #000;
}
.color2{
color : #abc;
}
And set to your elements like this :
document.getElementById("elem1").className = document.getElementById("elem1").className + " color1";
document.getElementById("elem2").className = document.getElementById("elem2").className + " color2";
Depending on your element structure. For example assuming those elements are sibling DIVs, you can define CSS as:
div.myclass {
color:#000
}
div.myclass + div {
color:#fff
}
div.myclass + div + div {
color:#abc
}
Then a single JS command:
document.getElementById("elem1").className = "myclass";
Would set color for all 3: http://jsfiddle.net/PjZ77/1/
If it makes sense in your case, use css classes and swap the container class.
HTML structure could be :
<div id="container1">
<div id="elem1" class="clsA">A</div>
<div id="elem2" class="clsB">B</div>
<div id="elem3" class="clsC">C</div>
</div>
and in CSS:
#container1 .clsA { color: #000; }
#container1 .clsB { color: #111; }
#container1 .clsC { color: #222; }
#container1.mystate .clsA { color: #DDD; }
#container1.mystate .clsB { color: #EEE; }
#container1.mystate .clsC { color: #FFF; }
You can set document.getElementById("container1").className with mystate class (or empty class, or any class name that makes sense you defined in the css.
Class change occurs for only one element (the container), so the elem(n) child items will be refreshed at the same moment.
I'm trying to change the background color of a div with a checkbox in it. I've made this for reference. I'm trying to replace the parent <div> with the 'highlight' <div>, so I thought the toggle <div> would work. When the checkbox is deselected, I would like the background color to go back to normal (or remove the 'highlight' <div>). Any help is appreciated.
You are setting an inline background-color style for the divs. This takes precedence over any properties you set via a CSS rule.
Add !important to the background-color value of the checked class in your css file, like so: http://jsfiddle.net/KtsGs/1/
There are a few issues present in the jsFiddle.
The first one is that, despite having written jQuery code, you haven't selected jQuery as the framework on the left hand side. That's a small issue specific to the code on jsFiddle, and easily fixed, though.
The second issue is that you have inline styles on the <div> elements, including a background-color. That inline style will be used in preference to any background-color specified using a CSS class (unless it's specified as being !important), so even when your code correctly adds the checked class to the element, the background colour isn't going to change.
The simplest solution is to simply change your CSS declaration:
.checked {
background-color: #ff0000 !important;
}
Here is an updated version of your jsFiddle with the working functionality (using the suggestion above).
However, I'd suggest you instead move the inline styles and JavaScript event handlers to their own CSS declarations, so you don't have to specify !important. That would require the following changes:
#holder > div {
clear: both;
padding: 0.5%;
margin-bottom: 1px;
border-bottom: 1px solid #eee;
float: left;
width: 96%;
style: height: 16px;
cursor: pointer;
background-color: white; // added this to the existing CSS
}
#holder > div:hover { // this is new
background-color: #fafafa;
}
Then move the CSS declaration for .checked below those, so that it takes precedence for the background-color property.
Here is another updated version of your jsFiddle, using the CSS declarations instead.
Is there any way to stop the conflict between same class or id of multiple css files. As I am explaining below for better understanding:
There is a master web page which has several <div> but there is a <div class"dynamic"> which always reload the contents including css files. Let's suppose if any class of master page has the same name to reloaded elements' class while properties are different. Then how should I handle this to stop the conflict.
master.html
<html>
<head> //attached master.css file here </head>
<body>
<div class="myClass"> </div>
<div class="dynamic"> /* often reload elements by ajax */ </div>
</body>
</html>
master.css
.myClass { height: 100px; width: 150px; background : red;}
.dynamic { height: 200p; width: 200px; }
now i am showing the reloaded html elements & css files into dynamic div of master page
reloaded tag line by ajax : <div class"myClass"> </div>
reload.css
.myClass{height: 30px; width: 25px; background: yellow; }
Now as you can see there are two classes with same name but different properties. Then how should I stop the confliction?
#Edit Thanks everyone for your support & time but my problem is different here.
the dynamic reloaded contents & css files are streaming from the client/user machine while master html page & it's css streaing directly from server.
so whatever the contents loads in dynamic div, it's coming from client side (e.g. tag lines & css, js). in that case i am not able to handle the css file which is just reloaded by ajax() so i think it can be sort out using js/jQuery fn().
You could apply the cascading rules of the CSS:
In your case, div.myClass inside div.dynamic should override div.myClass belongs to the body.
you adjust the reload.css rules to
.dynamic .myClass{height: 30px; width: 25px; background: yellow; }
The cascading rules which are applied when determine which rules should apply to html div could be referenced here
Updated 11.23
As the OP only have control over master.css, the above solution won't work. Thus, I suggest use child selector to limit the CSS rules to only the outer div.myClass. Modify the rule in your master.css to:
body > .myClass {...}
This rule will only apply to the .myClass which is the child of body. It leaves the spaces of styling for inner .myClass div.
Option 1: A more specific selector
.dynamic .myClass { }
This selector selects the .myClass element that is a descendent of .dynamic.
.dynamic > .myClass { }
This selector selects the .myClass element that is a direct child of .dynamic.
Option 2: Inline CSS
<div class="dynamic">
<div class="myClass" style="background-color: yellow;"></div>
</div>
Option 3: Use a different class.
UPDATE
If you want to avoid the previous defined property to be overwritten by a later defined value, you can use the !important syntax.
.myClass { background-color: red !important; } /* Sets the property to red */
.myClass { background-color: yellow; } /* Property is NOT overwritten */
If I understand your question correctly, this should sort it.
So you should add !important to the properties that seem to be overwritten.
div.myclass { ble ble }
div.main div.myclass { ble ble }
<body>
<div class="myclass"></div>
<div class="main><div class="myclass"></div></div>
</body>
Whichever css class of the same name is loaded last will overwrite anything set by the earlier class. However, if you use an inline style attribute this will always take precedence over anything set by the css file (so using an inline style is one option).
You could also use different style names or clarify your style with tag names div.myClass or id's #myDiv.myClass.