Develop Reference

How to Add Class to Child Element of Parent using Javascript

I'm attempting to add a class to a p tag using the parent tag. Unfortunately, it does not appear to be adding the class .answer to the p tag. This is the code I have so far:
HTML
<div class="x-acc-content">
<p>This is sample text.</p>
</div>
Javascript
function($) {
$(this).children('div.x-acc-content').getElementsByTagName('p') [0].addClass('answer');
};

You can use .children('p') to get all children inside your div and then use .addClass() to add class to p tags .
Demo Code :
$(".x-acc-content").children("p").addClass("answer")
//or
//$(".x-acc-content").find("p").addClass("answer")
//or only first p tag
//$(".x-acc-content").find("p:first").addClass("answer")
.answer {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="x-acc-content">
<p>This is sample text.</p>
<p>This is sample text.</p>
</div>

Try
$(".x-acc-content").find("p").addClass("answer");
or
$(".x-acc-content"). children("p").addClass("answer");
or
$(".x-acc-content p").addClass("answer");

How can I style a component whose class changes based on a `use` directive in Svelte?

I am creating a directive which adjusts the class of the element that it is applied to. However, the styles for that class do not apply when the class changes. For instance:
Form.svelte
<form id='sign-in' use:delayed={ handleSubmit }>
<label for='sign-in-name'>Your Name</label>
<input required id='sign-in-name' type='text' />
<input type='submit' value='Sign In' />
</form>
<style>
form {
display: block;
}
form.submitting {
display: none;
}
</style>
Delayed.js
export default function(node, action) {
node.addEventListener('submit', async function(event) {
event.preventDefault()
const originalClass = node.className
node.className = `${ originalClass } submitting`
await action()
node.className = originalClass
})
}
In this case, the class will change successfully in the DOM, but the form will still display. The form.submitting style doesn't even make it into the CSS generated by Svelte.
I know that I can work around this using a global stylesheet, but I'm curious why the scoped styles don't apply and if there's a way to make it work that way.
This works, but it feels hacky.
<style>
form {
display: block;
}
:global(form.submitting) {
display: none;
}
</style>

Svelte compiler removes unused CSS rules, that is rules with selectors that do not match in the markup of the component. You should have a compiler warning "Unused CSS selector" about that. And since the compiler can't see dynamically added classes, your form.submitting selector is removed.
The solution is indeed to make your dynamic selector :global(...).
If you want your style to only apply in the scope of this component and its children, you need a wrapping element that you can reference like such:
<div>
<form>...</form>
</div>
<style>
div :global(form.submitting) { ... }
</style>
Svelte will scope the div part of the selector to the current component, effectively meaning that the :global(...) part will only apply to the form inside a <div> inside this component.

Use external font for inline CSS in React.js

Hello there everybody,
I am trying to make a to-do list in react, and in there, I want to change the font to something external, like Montserrat or Roboto. Unfortunately, I am using CSS in an inline way. I am not sure how to add the external CSS. Usually, I copy and paste an #import snippet, which looks like this:
#import url('https://fonts.googleapis.com/css?family=Roboto');
Here is my code for my TodoItem(The file for the individual todo item)
import React from 'react'
function TodoItem(){
const styleSpan = {
fontSize:50,
fontFamily:"Roboto",
borderRadius:10
}
const styleCheckbox = {
width:50,
height:50,
marginRight:50,
backgroundColor:"#edc2d6",
}
return(
<div>
<input type = "checkbox" style = {styleCheckbox}></input>
<span style={styleSpan}>Todo item here</span>
</div>
)
}
export default TodoItem
to use inline CSS, you must put your style options in an object. This can work when you have two correlating values, but almost impossible for single values.
How can I add an external font when coding for inline CSS?

How can I add an external font when coding for inline CSS?
You can try something like this -
<div>
<style
dangerouslySetInnerHTML={{
__html: `
#font-face {
font-family: 'AdamGorry-Lights';
src: url(url-to-font) format('woff2');
font-weight: 300;
font-style: normal;
}
`,
}}
/>
<input type="checkbox" style={styleCheckbox}></input>
<span style={styleSpan}>Todo item here</span>
</div>
This allows you to use it in styles as
const styleSpan = {
fontSize: 50,
fontFamily: 'AdamGorry-Lights',
borderRadius: 10
}

You can import the css in the parent css file & change the font family.
Have created a DEMO. In this demo I have imported the css in the style.css file and have changed the font-family to Roboto

Add style to part of text

Can I add style to part of text from an <input> value or a <span>?
I have some data like:
{text text} an other text...
And I will apply style for the text between {}.
My data is: <span>{RFS.KIS.ZWO} JJD000090085077412015021014193191</span>

I don't really see the js part here.
If I understood correctly you want CSS styles on a part of text. To do this you can put that text in an html tag and add a CSS class with the desired style to it. (changed formatting)
e.g.
HTML
<span class="myStyle">text text </span> more text.
CSS
.myStyle {
color: red;
}

For SPAN:
$(function() {
var text = $("span").text();
var replaced = text.replace(/\{(.*)\}/, function( $0, $1 ) {
return "{<span style='color: red;'>".concat($1, "</span>}");
});
$("span").html(replaced);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Text: {something}</span>

Wrap your text into tags instead of "{" "}"
calsses:
<span class="mytag">text text</span> text text
not you can style your class seperatly
<style>
.mytag {
color: blue;
}
</style>
or tags for example (not working for all browsers):
<mytag>text text</mytag> text text
not you can style your tag seperatly
<style>
mytag {
color: blue;
}
</style>

change css with knockoutjs

Lets say that I have a div with a background color of #333333, and I have an input field where the user can input their own hex value, ex: #000000, and then I want the div's background color to change to #000000 on the fly....
example:
HTML:
<div class="mydiv"></div>
css:
<style type="text/css">.mydiv { background-color:#333333; }</style>
Then when the user changes the value via an input type="text" field, when the CSS should change in the style="text/css" block.
How do I make that binding?
I can't use the in my style block, because that is not valid CSS, and I don't want to do it on my like and then insert the style here... So again, I want to change the CSS in my style block, and not add a style to my div element.
Sort of like this where they update it on the fly; http://css3gen.com/box-shadow/
When you change something, the CSS behind changes, so that you can preview your element on the fly.

Use style binding
<div data-bind='style: { "backgroundColor": CustomBGC }'>
http://jsfiddle.net/nyothecat/jKysB/3/
Edit:
Since you want to update the style, you can make use of the cascading style sheet.
Define a class with init color, then create a style tag with a text binnding. Fill this one with your new color.
In your css file:
.myClass { background-color: #f00 }
Make sure to put your css file before the following
<div id="koRoot">
<div class="myClass">
<input type='text' data-bind="value: customColor" />
</div>
<style data-bind="text: myObservableStyle(customColor)"></style>
</div>
And the javascript:
$(document).ready(function () {
var ViewModel = {
customColor: ko.observable("#f00"),
myObservableStyle: function (obs) {
return ".myClass { background-color: " + obs() + " }";
}
}
ko.applyBindings(ViewModel, document.getElementById("koRoot"));
});
http://jsfiddle.net/k97ZZ/1/

pseudohtml :
<input type="text" data-bind="value:userInput">
pseudoscript:
var MyModel=function(data){
var self=this;
self.userInput=ko.observable('#333333');
self.computedCss=ko.computed(function(){
//appends Style block to head everytime userInput changes
appendal="<style>.myClass { background-color: "+self.userInput()+";!important}</style>";
$('head').append(appendal);
}
}
myModel = new MyModel({});
ko.applyBindings(myModel);

You can use the style binding along with the value binding
<input data-bind="value: inputColor" />
<div data-bind="style: { color: inputColor()}">
Something
</div>
var viewModel = {
inputColor: ko.observable()
};
Edit
Since you want to change the style element itself use the text binding on style tag. One thing to remember that entire style will be changed so you will have to maintain valid css rules before updating the element.
<style data-bind="text:inputColor"></style>
You might want to subscribe to the inputColor observable so you can change the input to valid css before populating the style element.
This question might be relevant.

You can use virtual if binding
<style type="text/css">
<!-- ko if: someExpression -->
.mydiv { background-color:#333333; }
<!-- /ko -->
<!-- ko if: !someExpression -->
.mydiv { background-color:#000000; }
<!-- /ko -->
</style>