We Keep Coding

remove the inherited CSS value?

I'm trying to remove the value of an inherited CSS property using Jquery.
.class1 #id1 div.class2 input.class-input{
border-color: #bbb3b9 #c7c1c6 #c7c1c6;
}
Anyone tell me how to remove this "border-color".
Thank.

Create a new class for example
.new_class{
border-color: #00ffdd !important;
}
!important does the trick!
Check this

You can use jQuery, but you'll have to assign a value to the border-color property. You can use transparent though:
$('.class-input').css('border-color', 'transparent');
Edit: Or you can disable the whole border:
$('.class-input').css('border', 'none');

You can either swap the on your div to change the color, or set the border color to empty using
$(".class1").css("border-color", "");
But I would recommend swapping out the class using the removeClass and addClass JQuery functions.

If you still want to keep the width of the border:
border-color: transparent;
If you want to remove the border all together
border: 0;
Edit: border: none; will give your the same result
So your jquery could look something like this:
$(".class-input").css("border","0");
However I would suggest using CSS if you don't need to make it animated. Since you raised the concern about .class1 #id1 div.class2 input.class-input.myclass (I'm assuming that's what you mean since you wouldn't be throwing a div into an input box.
You can use the CSS pseudo-selector :not
.class1 #id1 div.class2 input.class-input:not(.my-class){
border: 0;
}

The simplest way to handle this is to add another reference to give your override code a higher specificity.
.class1 #id1 div.class2 input.class-input [#MyNewID]{
border: none;
}
This removes the border for the area where you have added the ID so that if you are using this same format in other pages you can add an additional ID on the element on the page where you want the border to "disappear"
Please don't use !important this is a lazy way to override code and is not necessary 95% of the time. It will also cause you problem later when you are trying to change this if you are pushing down site wide skins.

toggleClass/addClass doesn't work with input

I have an input element:
<input id="box" type="text" />
And the following CSS class:
.box-change
{
border-color:#ffffff;
}
As well as the following jQuery code:
$('#box').toggleClass('box-change');
However, it doesn't change the border color as I expect it to. Does anyone know why?
Edit:
The input already has a style, it is thus:
#box
{
border-color:#ff0000;
border-style:solid;
border-bottom-width:1px;
border-left-width:1px;
border-top-width:1px;
}

If you've originally removed border, then you'll have to set
border-width
and
border-style
So in short your CSS should look like:
.box-change
{
border: 1px solid #fff;
}
But it all depends what your initial style is, what colour is background of the containing element of your input etc...
Edit after you've provided more detail
your class doesn't get applied because class that sets style by ID has higher priority in cascade than CSS class. That's the main reason why you're not seeing it applied.
If you'd like your CSS class to take over you have two options:
set it as important:
.box-change
{
border: 1px solid #fff !important;
}
provide CSS rule that has higher specificity and will take over
#box.box-change
{
border: 1px solid #fff;
}
The second way is the preferred way, because using !important will make your CSS harder to maintain, since your classes don't cascade as per CSS but rather as per your importance. And you can easily loose control over that. Avoid important unless on seldom occasions.
How to troubleshoot this?
To help you in the future, you should be using developer tools in browser (Chrome DevTools or Firebug for Firefox) that would immediately show you the problem. And of course understand CSS specificity rules and how they cascade.

As your original styles are defined with #box it is more specific than .box-change, and by default overrides your new additions. It could also be that .box-change is higher up the cascade than #box.
You could solve it one of two ways:
#box.box-change{
border-color: #fff;
}
or
.box-change{
border-color: #fff !important;
}

why the js code can't control the css code?

<script>
var divBgTop=0;
function initDivTop()
{
divBgTop=document.getElementById("divBg").style.pixelTop;
alert(divBgTop);
}
</script>
<style>
.divBgCss
{
position:absolute;
left:100px;
top:100px;
width:100px;
height:100px;
background-color:red;
}
</style>
<body onload="initDivTop()">
<div class="divBgCss" id="divBg"></div>
</body>
the result is always 0. why?

What you're after is the offsetTop:
divBgTop=document.getElementById("divBg").offsetTop;
Without specifying the unit, you will not get 0 but rather something else but not 100 - you better add unit like px so you won't get wrong results when using the code.
Live test case: http://jsfiddle.net/A9Mr2/1/

There is was an error in the CSS. You specify 100, but without a unit. Make it 100px (or another unit, if you wish).
Now the only problem is the used propery. pixelTop apparently won't work, but offsetTop will. This is a property of the element, rather than the style, so you'll need:
getElementById('divBg').offsetTop
[edit: adjustment and addition after question is modified]

the pixelTop property is read-only, all others are read/write.
you can set the pixelTop property..like http://jsfiddle.net/bingjie2680/WJrn6/
update:sorry: write-only

I think the code should be:
divBgTop = document.getElementById("divBg").style.top;
However, this will only read inline styles. To read computed styles you need to... well... read computed styles :)

Removing or altering CSS pseudo class in jQuery

A simple enough question, so briefly - is it possible to remove or alter in anyway a CSS pseudo class using jQuery? Or any other Javascript method for that matter
Specifically I want to get rid of :focus on inputs. I can't alter the CSS file directly in any way.
thanks for any help
Buster

I can't alter the CSS file directly in
any way.
Assuming you can only use JavaScript to do this, I can't think of anything better than:
$('head').append('<style>input:focus{background:#fff}</style>');
You will have to individually reset each property. font-weight:normal, color:#000 - whatever you need.
See: http://jsfiddle.net/jqpAu/

Without more specific detail it's hard to answer accurately, but if you want you can just override the :focus style:
// in the CSS file
input:focus {background-color: red;}
// in your page
input:focus {background-color: inherit;} // overrides with the parent background
Demo

See this answer: Setting CSS pseudo-class rules from JavaScript
I think you are looking for a way to add CSS dynamically. Example: http://jsfiddle.net/zkMCY/
Code:
var style = '\
<style type="text/css">\
a:hover{ color: #a55; }\
</style>';
$('body').append(style);

If you want to actually prevent the user from using your input, do that via your html:
<input disabled="disabled">

you can use $(selector).removeClass(className)

Utilising cssText to set styles with JavaScript

I was going through Nicholas Zakas presentation on JavaScript here : http://www.slideshare.net/nzakas/writing-efficient-javascript (slide number: 89/139)
He recommends using cssText property whenever you are setting a bunch of styles through JavaScript. The best solution is obviously adding those styles to a class and then using JS to add the classname to an element.However, in many situations, We resort to just setting the properties directly within JS when the number of properties are low.
It seems from his presentation that using cssText property would be more efficient in such scenarios.I tried to look up more on the property but couldn't find much information.
Has anyone used the 'cssText' property ? It would be great to have some more technical info on how the property helps.

It's a string representation of the inline styles set on an element.
<head>
<style type="text/css">
.foo {color: #d0d;}
</style>
</head>
<body>
<p id="e0" class="foo" style="border:2px solid #654;">foo</p>
</body>
console.log(document.getElementById('e0')); gives "border: 2px solid rgb(102, 85, 68);" in my setup (which in the inline style and not anything from the class).
If you are setting many styles on an element, it is good to set them in one go as a string (using this property) to avoid triggering the reflows that can happen when setting certain style properties.
Links:
msdn take on cssText
phpied.com reflow discussion