logo
down
shadow

Using classList when element is set to display none


Using classList when element is set to display none

By : Fahmida Hossain
Date : November 21 2020, 11:01 PM
help you fix your problem It's all about specificity in CSS, ID's are more specific than classes, so even if your element gets the class, the styles aren't specific enough.
Change the style to include the ID, and of course, if you want to see the change, make the element visible
code :
#div1.fullview{

       width: 99%;
       height: 500px;
       border-radius: 5px;
       border: 1px solid #000000;
       display : block

}
#div1 {
    width: 25%;
    background-color: #000000;
    display: none;
}

#div2 {
    width: 50%;
    height: 10px;
    background-color: #cccccc;
}

#div1.fullview {
    width: 99%;
    height: 500px;
    border-radius: 5px;
    border: 1px solid #000000;
    display: block;
}
<div id="div1">
    content here
</div>

<div onclick="myFunction()" id="div2">
    content here
</div>

<script>
    function myFunction() {
        document.getElementById("div1").classList.toggle("fullview");
    }

</script>


Share : facebook icon twitter icon
check if a class added or removed from an html element using element.classList

check if a class added or removed from an html element using element.classList


By : user2031663
Date : March 29 2020, 07:55 AM
hop of those help? If you just want to see if an element has a particular class, you can use a function like:
code :
function hasClass(element, className) {
  var re = new RegExp('(^|\\s)' + className + '(\\s|$)');
  return re.test(element.className);
}
function hasClass(element, className) {
  return (' ' + element.className + ' ').indexOf(' ' + className + ' ') >= 0;
}
classList.toggle('class', true) vs classList.add

classList.toggle('class', true) vs classList.add


By : user3519069
Date : March 29 2020, 07:55 AM
I hope this helps . There is no difference; the second argument to toggle is to make this kind of thing more convenient:
code :
if (hide) {
    el.classList.add('hidden');
} else {
    el.classList.remove('hidden');
}
el.classList.toggle('hidden', hide);
The element modifiers classList.add and classList.remove not working as expected

The element modifiers classList.add and classList.remove not working as expected


By : Kimia Arefi
Date : March 29 2020, 07:55 AM
hope this fix your issue Two things:
element.classList.add = "test123"; should be element.classList.add("test123");
What is the difference between element.classList.contains() and element.matches()

What is the difference between element.classList.contains() and element.matches()


By : Sakhipov Ruslan
Date : March 29 2020, 07:55 AM
I hope this helps . element.matches allows for a much more flexible test.
If you only need to check if an element has or doesn't have one particular class, feel free to use contains. But if you want to do additional checking based on what CSS selectors the element can match, .matches allows for a much more concise method of achieving that goal. For example:
code :
element.matches('a.someClass.foo')
element.matches('.someClass[data-num="3"]:hover')
When I use element.ClassList in for loop it store only first element class and other are undefined

When I use element.ClassList in for loop it store only first element class and other are undefined


By : yaoxinghuo
Date : March 29 2020, 07:55 AM
will help you Remove the index from the class list. It's enough if you iterate through the elements only:
code :
for(let i=0;i < allbu.length;i++){
    buttoncopy.push( allbu[i].classList );
}
Related Posts Related Posts :
  • Append blade file to jquery function
  • NodeJS TypeError: Cannot read property of undefined
  • Using ng-if to check angular variable from another directive in angularjs
  • Replacing [b][/b] to apply BOLD text on a DIV
  • Bootstrap-select, behavior like SO tags field
  • Class name changing dynamically from JSON object in Angular.js
  • to add button which will redirect to View Page of current row in JQGrid
  • firebaseAuth GoogleAuthProvider() signInWithRedirect
  • AngularJS 1 Restangular GET stripping #
  • How can I do column move in ui-grid on tap & hold?
  • How to track a javascript function?
  • Chart.JS: How to add Data to a specific dataset
  • Accessing 'this' inside the callback should reference my array
  • get empty request while posting
  • CSS Flip animation on click
  • How to hide element if filter returns null angularjs
  • Popups for checking/unchecking a checkbox
  • Loop event click jquery synchronize current status
  • "Export to excel" button kendogrid download more than 1 file
  • Load bootstrap forms from select page
  • Using Vue with django
  • JS Outputting a form value receives 'undefined' in console
  • Why do enzyme not find 'tr' in a table?
  • Inject GET parameter to target URL of a button, on click
  • tags in JS and css counter increment
  • Post "url-from' in a form
  • TypeError: $(...).magnificPopup is not a function
  • .toggleclass and .slidetoggle don't work
  • user agent for windows 7 vs 8 vs 10
  • How to write (A or B or C) followed by X in JavaScript regex?
  • Ember template convention
  • Sum multiple objects in multiple arrays and then average sums
  • Append a list to ul
  • React router Link; activeClassName not working
  • Site Overlay not working "Uncaught ReferenceError: closeNav is not defined"
  • How to require Stateless Functional Components (Unknown module _createWrapper?)
  • Binding a field state (disabled or hidden) according to different selected values in a combobox
  • stomp+ActiveMQ with SSL
  • creating an expression that acts like a .contains
  • Showcase the first n-items in a bootstrap grid
  • Background colour fade on carousel
  • Extend prototype using decorator
  • In react router v4 how does one link to a fragment identifier?
  • How to send local storage data with ajax to php page?
  • Javascript not working after publish to IIS
  • Remove GMT+530(Indian standard Time) without changing current time in javascript
  • Javascript: Syntax creating private object properties
  • how to make the table not having <thead> header fixed
  • ng-init with condition statements
  • javascript change height based on element's height
  • How to improve performance when loading CSV file into html table with javascript and ajax?
  • Javascript for rounding down in a finance calculator
  • .htaccess file rules are disturbing the menubar layout when window goes on mobile view
  • Angular 1.5 Option with ng-change
  • Angular Trix not working in all browsers
  • Vue.js add property to bound object
  • Push item with interfaces on typescript
  • jQuery on click event firing multiple times
  • Add first three elements of array in javascript
  • HTML5 video Uncaught TypeError: .play is not a function
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com