Styles render all css

How am I to know what is what and if I want to change colours or layout and locations of fields?? I did not make these or put them there the computer did or more correctly visual studio did.. So if I added the new bootstrap how do I know that the new one is active and my guess is that bootstrap is not in control of the date and time pickers even though if you go to the web and look up bootstrap date and time picker it states these are part of the bootstrap options. Also if I wanted to change to something different do I just remove what the visual studio wizard made?

Is is correct to write that these two lines control the font of the website when they are located in the layout cshtml @*@Styles.Render(«~/Content/css»)*@
@*@Styles.Render(«~/Content/style.css»)*@ When I comment them out there is no formating. If I add back the @Styles.Render(«~/Content/css») line Item Some fonts change but the block structure of the page comes back and it laid out in the way that I expect. IF I add this back@Styles.Render(«~/Content/style.css») A single line of fonts change IS this needed?

User-474980206 posted
mvc dos not come with a datepicker. you added one to your projects. There are literally 100’s of datepickers to chose from, though because you reference a jquery-ui script, you may be using its datepicker (but who knows). as a beginner web developer knows, browser UI components come with two parts, a script file, with the javascript to implement the component, and a CSS file for styling the component. Many component may also require a font file, or images, although more modern libraries use svg’s instead of images or a custom font file. to figure out what an existing project uses requires using the ide get references and file search. a simple serach for ~/Content/css should have displayed the bundle definition. seach the files specified in bundle, should have given the source files. A review of the code in the source files should shown what you are using. just a file sercah of datepicker, shoudl have given the javascript source file. there is this search website called google, that lets you search for information. a google search of Styles.Render and Scripts.Render would have given tutorials (text and video), trouble shooting tips, etc. you should give it a try.

User2130491911 posted
Wow just poor attitude for no reason. hey you are the smart one In this area not me. I am trying to understand it better or atleast enough to fix this long standing bug with out program.. I got into this mess.. using the internet to find help files and tutorials, I use pural site and other resources that have very lame instruction sets. The skip important details that help with understanding the issues. You see not everyone learns the same. Base on your attitude just now I see why those instructions are lame. They assume things which is never good to do. I am not going to let you de-rail my discovery with unkind words. After almost 3+ years I may be close to fixing our datepicker issue. IF you can’t help don’t. and please keep your unkind attitude to yourself please! As not everyone has the same capacity to understand stuff JUST because its on the dumb internet. Anyway back to the matter.. @Scripts.Render(«~/bundles/bootstrap») I re-added this item and nothing happened the date picker does not work so this means this line item is not the one running the date picker. So I re-commented it out Is it fair to write that bootstrap does nothing?? I took it out of the layout file and I see no visible changes. can I remove it for good? I uncommented this line @Scripts.Render(«~/bundles/jquery») and the broken date picker comes back to life. My assumption is that this is in control of the datepicker. How would I now replace this bad date picker with one that actually works as advertised. Oh an Bruce. Thanks for the details as I did not know the stuff of the Tri-factors for those controls. Thank you despite your unkind attitude. Any help is appreciated regardless of the packaging!

Читайте также: Php tutorial php net

I uncommented this line @Scripts.Render(«~/bundles/jquery») and the broken date picker comes back to life. My assumption is that this is in control of the datepicker. How would I now replace this bad date picker with one that actually works as advertised.

Bootstrap 3 components requires jQuery. I assume the date picker started working because there are redundant jQuery references at least that’s what it looks like in your code snippets above. The date picker is probably using another jQuery library. We talked about removing redundant jQuery (and Bootstrap) references in one of your recent threads. Anyway, continue removing/adding/testing until you get to a configuration that works or at least you find the conflict.

Dev centers

Learning resources

Community

Support

Programs

logo

Источник

How to get CSS styles from an element with JavaScript

In JavaScript, sometimes, you might want to retrieve CSS styles applied to an element through inline styles or external style sheets. There are multiple ways to do this, depending on whether you fetch inline styles or rendered styles.

In vanilla JavaScript, the DOM style property is used to get the styles applied to an HTML element using the style attribute. Let us say we have the following HTML element:

button id="clickMe" style="color: red; font-weight: bold;">Click Mebutton>

const btn = document.getElementById('clickMe') // pint color & font weight properties console.log(btn.style.color) // red console.log(btn.style.fontWeight) // bold

However, the style property only works for the inline styles defined using the style attribute. If you try to access a property not defined as an inline style rule, let us say the backgroundColor , a null value will be returned:

console.log(btn.style.backgroundColor) // null

The style property can not be used to retrieve style information from elsewhere, such as the style rules defined using the

To get the actual CSS property values used to render an HTML element, you can use the getComputedStyle() method. This method works for everything: inline styles, external style sheets, and browser defaults. Let us say you have the following embedded

style> button  background-color: yellow; text-align: center; height: 20px; width: 100px; > style>

The getComputedStyle() method is always called on the window object with the element as a parameter and returns an object of properties:

const btn = document.getElementById('clickMe') // get all rendered styles const styles = window.getComputedStyle(btn)

Now you can access any CSS property like you’d have done with the style property. For example, to access the background-color , you can do the following:

const backgroundColor = styles.backgroundColor // rgb(255, 255, 0)

To get the rendered height and width of the element regardless of whether or not it was defined, use the following code:

const height = styles.height // 20px const width = styles.width // 100px

Alternatively, you can use the getPropertyValue() method on the styles object to access a CSS property. It accepts the actual name of the CSS property and not the one used for JavaScript:

const fontWeight = styles.getPropertyValue('font-weight') // 700

Note: The value 700 is equivalent to bold for the CSS property font-weight . Similarly, rgb(255, 255, 0) is just an RGB value which is the same as yellow .

The getComputedStyle() method is used to get the actual CSS properties used by the browser to render the element. It works in all modern and old browsers, including IE 9 and higher. Finally, the getComputedStyle() method only works for getting styles. You can not use it to set a specific style to an HTML element. To set CSS properties, you should always use the DOM style property, as explained in an earlier article.

CSS pseudo-elements are extremely useful to style parts of an element without additional HTML elements. To get style information from pseudo-elements, you pass in the name of the pseudo-element as a second argument to the getComputedStyle() method. Let us say we have the following

element:

p class="tip">Learn JavaScrit for free!p>

.tip::first-letter  color: green; font-size: 22px; >

To retrieve the color property of the .tip::first-letter , you should use the following JavaScript code snippet:

const tip = document.querySelector('.tip') // retrieve all styles const styles = window.getComputedStyle(tip, '::first-letter') // get color console.log(styles.color) // rgb(0, 128, 0)

The DOM style property to retrieve inline styles applied to an element using the style attribute.
The window.getComputedStyle() method to retrieve computed styles applied to an element through elements and external style sheets. To get pseudo-elements CSS styles, you need to pass the name of the pseudo-element as a second parameter.

✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like.

Источник

Styling React Using CSS

There are many ways to style React with CSS, this tutorial will take a closer look at inline styling, and CSS stylesheet.

Inline Styling

To style an element with the inline style attribute, the value must be a JavaScript object:

Example:

Insert an object with the styling information:

class MyHeader extends React.Component < render() < return ( >>Hello Style!
 Add a little style!
 
 ); > >

Note: In JSX, JavaScript expressions are written inside curly braces, and since JavaScript objects also use curly braces, the styling in the example above is written inside two sets of curly braces > .

camelCased Property Names

Since the inline CSS is written in a JavaScript object, properties with two names, like background-color , must be written with camel case syntax:

Example:

Use backgroundColor instead of background-color :

class MyHeader extends React.Component < render() < return ( >>Hello Style!
 Add a little style!
 
 ); > >

JavaScript Object

You can also create an object with styling information, and refer to it in the style attribute:

Example:

Create a style object named mystyle :

class MyHeader extends React.Component < render() < const mystyle = < color: "white", backgroundColor: "DodgerBlue", padding: "10px", fontFamily: "Arial" >; return ( >Hello Style!
 Add a little style!
 
 ); > >

CSS Stylesheet

You can write your CSS styling in a separate file, just save the file with the .css file extension, and import it in your application.

App.css:

Create a new file called «App.css» and insert some CSS code in it:

Note: You can call the file whatever you like, just remember the correct file extension.

Import the stylesheet in your application:

index.js:

import React from 'react'; import ReactDOM from 'react-dom/client'; import './App.css'; class MyHeader extends React.Component < render() < return ( Hello Style!
 Add a little style!.
 
 ); > > ReactDOM.render(, document.getElementById('root'));

CSS Modules

Another way of adding styles to your application is to use CSS Modules.

CSS Modules are convenient for components that are placed in separate files.

The CSS inside a module is available only for the component that imported it, and you do not have to worry about name conflicts.

Create the CSS module with the .module.css extension, example: mystyle.module.css .

mystyle.module.css:

Create a new file called «mystyle.module.css» and insert some CSS code in it:

Import the stylesheet in your component:

App.js:

import React from 'react'; import ReactDOM from 'react-dom/client'; import styles from './mystyle.module.css'; class Car extends React.Component < render() < return >Hello Car!
; > > export default Car;

Import the component in your application:

index.js:

import React from 'react'; import ReactDOM from 'react-dom/client'; import Car from './App.js'; ReactDOM.render(, document.getElementById('root'));

Источник