Is there a way to create a button that imports styles from a .css file, or is it possible to change multiple CSS properties with buttons to create different website themes?
This is the CSS file I have:
.body {
background-image: url("example.png");
}
And here's the HTML file:
<html>
<head>
<script>
// ???
</script>
</head>
<body>
<button onclick="???">Import!</button>
</body>
</html>
EDIT: I am open to using anything like jQuery as well. Any solution will do!
I have experience doing this multiple times. If you are interested, check out this tutorial for guidance.
You can utilize JavaScript to specifically target the href attribute and switch to a different stylesheet.
<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">
<script>
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
<button onclick="swapStyleSheet('new.css')">New Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>
Here is the solution you are looking for:
Check out the example below and click the button
$(".btn-success").click(function()
{
$('head').append('<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<button type="button" class="btn btn-success">Click Me</button>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>Give this a shot:
$('#colorize').click(function (){
$('link[href="design.css"]').attr('href','theme.css');
});
$('#reset').click(function (){
$('link[href="theme.css"]').attr('href','design.css');
});Customizing the styles on your website based on button clicks is a simple task. You just need to detect when the button is clicked and then apply the appropriate stylesheet. You can even have different styles for different buttons, like a theme changer feature. Here's the code snippet to achieve this:
$('button.summer').click(function() {
$('head').append('<link rel="stylesheet" href="assets/css/summer.css">');
});
$('button.winter').click(function() {
$('head').append('<link rel="stylesheet" href="assets/css/winter.css">');
});
When the button with the class "summer" is clicked, the summer.css stylesheet will be added to the head section of your page. Similarly, clicking the winter button will add the winter.css stylesheet.
This method involves creating separate stylesheets for specific themes, while keeping common styles in a main stylesheet like general.css or style.css. This way, the custom styles don't replace the overall theme stylesheet but complement it by adding unique styling elements as needed.
By following this approach, you can easily customize and enhance the appearance of your website based on user interactions. Hopefully, this explanation helps you implement these changes effectively.
Recently, I developed a browser game that operates on MVC3 .Net platform. In order to maintain fairness among players and prevent any advantage gained through the use of mouse clicking macros, I decided to include the following line of code in my JavaScrip ...
Can someone assist with passing an object that I am creating step by step using promises with firebase? I would like to know if there is a more efficient way to construct the object without passing it through the promise chain. Below is the code snippet I ...
As a newcomer to jquery and JavaScript, I'm facing some challenges in getting the desired functionality. Currently, I am trying to animate three images simultaneously - one moving downward (iphone), another fading in (shadow), and the third one animat ...
Check out the code on jsFiddle .component-container { width: 800px; height: 200px; background-color: lightyellow; border: 1px solid red; padding: 10px; overflow: hidden; } .component-container .grid-container-1 { display: grid; grid-tem ...
Referenced from: This is the approach I have experimented with: custom-validator.directive.ts import { Directive } from '@angular/core'; import { AbstractControl, FormControl, ValidationErrors } from '@angular/forms'; @Directive({ ...
I am experiencing an issue where the datatable row is displaying "undefined" instead of the data from my Firebase database. Even when I tried inserting random data into the HTML file for the datatable, it still shows undefined. Here is a link to My Datata ...
Although I've seen similar questions before, none of the solutions seem to be effective in my case. In this scenario, there's a div class that has a background image set up: #index-box{ border-radius: 20px; background: url('/stati ...
Currently, I am using the Superfish menu in Drupal7 and have designed my first item level to be vertical. However, I now want to style my second item level horizontally. I have tried various CSS approaches and added some class names via jQuery like $(&apo ...
My current project involves creating a user interface where users can change the texture of a selected object by clicking on the desired texture image. However, I am facing a challenge where I can only access and use the last texture added in the array. ...
In my Angular 8 app, I am developing a basic carousel without relying on external libraries like jQuery or NgB. Instead, I opted to use pure JS for the task. However, the code seems quite cumbersome and I believe there must be a more efficient way to achie ...
Encountering an issue during the following process: Trying to make a $.ajax call: $.ajax({ type: "POST", url: '/endpoint', headers: {"X-CSRFToken": csrf_token}, data: { 'action': 'my-action', 'data&ap ...
I am facing an issue with my vertical slick slider: $('.slider').slick({ slidesToShow: 3, slidesToScroll: 1, arrows: false, dots: false, infinite: false, centerMode: true, vertical: true, focusOnSelect: true }); .slider { bac ...
One issue I am facing is related to triggering my save method only when a checkbox is selected or true in Vue JS. I have no problem listing values and saving them to the database using axios, Vue JS, and Spring Boot. However, every time I click the checkbo ...
Currently, I am encountering a conceptual challenge along with a real error. My current project involves developing an inventory module concept that comprises of two models: Inventory Item The Inventory model solely consists of an "items" field, which s ...
When I call the function buildFileTree, I store its response in a constant variable called data. const data = this.buildFileTree(dataObject, 0); The value of dataObject is: const dataObject = JSON.parse(TREE_DATA); And the content of TREE_DATA is: cons ...
I am encountering an issue with triggering a click event in my Angular app using code similar to the example below. Can anyone help me understand why the event is not being triggered? var app = angular.module("myApp", []) app.directive('myTop', ...
Within a div, there are currently 4 links embedded. I am looking to extract the second link using jQuery. $('div.thumbnails-b').find('a:eq(1)').attr('href'); Although I can see all 4 links in the browser's console log, ...
Here is the code I'm currently working with: $.get('getstatsAccepted' + tickerid, {tickerid: tickerid}, function(data) { alert(data.length); }, 'json'); I am interested in obtaining the numbe ...
I am currently working on an AngularJS application. I have encountered a challenge where the end user is able to view the app code from the browser's source code. I am seeking advice on how to address this issue effectively. Is there any recommended ...
I'm currently looking for a way to search within a JSON result that has been returned. The result that was returned looks like this: {"Result":["Css","java","jquery","asp.net","mvc","javascript","asp","c#"]} My goal is to extract all the words that ...